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内 容 简 介 


HIML5、CSS3 和 JavaScript 技术 是 网 页 设计 的 精髓 ， 本 书 以 应 用 实例 和 综合 实战 案例 的 形式 逐一 详解 
HTMLS5 网 页 设计 的 文档 结构 、 文 本 、 图 像 、 用 HTMLS5 创建 超 链接 、 表 格 、 使 用 表单 ， 用 CSS3 设置 表格 和 表 
单 的 样式 、 美 化 图 片 、 背 景 和 边框 ， 讲 述 JavaScript 内 置 对 象 、 对 象 编程 、JavaScript 操纵 CSS3、HTMLS5 绘制 
图 形 、HTML5 中 的 音频 和 视频 、 使 用 jQuery Mobile 设计 移动 页 面 等 网 页 设计 的 方法 和 技巧 。 

通过 对 本 书 实例 和 综合 实战 案例 的 学 习 与 演练 , 读者 可 以 尽快 掌握 所 学 的 知识 , 提高 网 页 设计 的 实战 能 力 ; 
同时 本 书 提供 实例 源 代码 ， 可 供 读 者 直接 查看 和 调用 ， 以 便 快速 上 手 或 进行 二 次 开发 。 

本 书 内 容 丰 富 、 理 论 结合 实践 ， 对 从 事 网 站 美工 工作 的 读者 而 言 ， 是 一 本 必 不 可 少 的 工具 书 :对 从 事 Web 
系统 开发 的 读者 来 说 ， 也 是 一 本 难得 的 参考 手册 。 


本 书 封面 贴 有 清华 大 学 出 版 社 防伪 标签 ， 无 标签 者 不 得 销售 
版 权 所 有 ， 侵 权 必 究 。 侵 权 举 报 电 话 : 010-62782989 13701121933 
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前 言 


HTML5+CSS3+JavaScript 技术 具有 布局 标准 和 样式 精美 的 特点 , 成 为 Web 2.0 众多 技术 中 
最 受 欢迎 的 网 页 设计 技术 。 HTML5+CSS3+JavaScript 技术 的 应 用 范围 越 来 越 广 , 例如 门户 网 站 、 
BBS、 博 客 、 在 线 影视 等 。HTML5、CSS3 和 JavaScript 三 者 的 结合 ， 使 网 页 样式 布局 和 美化 
达到 了 一 个 不 可 思议 的 高 度 。 引 领 读者 快速 学 习 和 掌握 新 的 设计 模式 是 本 书 的 初衷 。 


本 书 内 容 


第 1 章 是 HIMLS 快速 入 门 ， 包括 HTML5 的 基本 概念 、HTML5 网 页 文档 结构 、HTML5 
文件 的 编写 方法 和 HTML5 语法 的 新 变化 。 

第 2 章 介 绍 HTML5 网 页 中 的 文本 和 图 像 ， 包 括 添 加 文本 、 文 本 排版 、 文 字 列表 和 网 页 中 
的 图 像 等 。 

第 3 章 介绍 用 HTMLS5 建立 超 链接 ， 包 括 URL 的 概念 、 超 链接 标记 、 创 建 热点 区 域 和 浮 
动 框架 这 ame 等 。 

第 4 章 介 绍 用 HTML5 创建 表格 ， 包 括 表格 基本 结构 及 操作 、 完 整 的 表格 标记 和 制作 计算 
机 标价 表 等 。 

第 5 章 介绍 使 用 表单 ， 包 括 表单 概述 、 表 单 基本 元 素 的 使 用 和 表单 高 级 元 素 的 使 用 等 。 

第 6 章 是 CSS3 概述 ， 包 括 CSS3 基本 概念 、 编 写 与 浏览 CSS3， 以 及 在 HIMLS 中 使 用 
CSS3 的 方法 。 

第 7 章 介绍 CSS3 中 文字 与 段落 属性 ， 主 要 包括 字体 属性 、 文 本 高 级 样式 和 段落 属性 。 最 
后 通过 两 个 综合 实例 ， 进 一 步 讲述 如 何 设置 公司 标题 和 旅游 网 页 混 排 的 方法 和 技巧 。 

第 8 章 介 绍 用 CSS3 设置 表格 和 表单 的 样式 ， 包 括 表 格 基本 样式 和 CSS3 与 表单 ， 并 通过 
5 个 综合 实例 进一步 讲述 表单 和 表格 样式 的 制作 方法 和 技巧 。 

第 9 章 介绍 CSS3 美化 图 片 ， 主 要 包括 图 片 样式 、 图 片 的 对 齐 和 图 文 混 排 等 。 

第 10 章 介绍 CSS3 美化 背景 与 边框 ， 主 要 包括 背景 相关 属性 、 边 框 、 圆 角 边框 、 图 像 边 
框 和 边 距 ， 最 后 通过 1 个 综合 实例 进一步 讲述 如 何 制 作 圆 角 边框 效果 。 

第 11 章 是 JavaScript 概述 ， 包 括 JavaScript 简介 、 在 HIMLS 文件 中 使 用 JavaScript 代码 
等 。 

第 12 章 介 绍 JavaScript 语言 基础 ， 包 括 数据 类 型 与 变量 、 运 算 符 与 表达 式 、 流 程控 制 语句 
和 函数 等 。 

第 13 章 介 绍 JavaScript 内 置 对 象 ， 包 括 字符 串 对 象 、 数 学 对 象 、 日 期 对 象 和 数组 对 象 等 。 
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第 14 章 介 绍 JavaScript 对 象 编 程 , 包括 文档 对 象 模型 、 窗 口 对 象 、 文 档 对 象 和 表单 对 象 等 。 

第 15 章 介 绍 JavaScript 操纵 CSS3， 包 括 DHTML 简介 、 前 台 动 态 网 页 效果 、JS 控制 表单 
背景 色 、 文 字 提示 和 实现 即时 验证 效果 等 。 

第 16 章 介 绍 HTML5 绘制 图 形 ， 包 括 canvas 概述 、 绘 制 基本 形状 、 绘 制 渐变 图 形 、 绘 制 
变形 图 形 、 图 形 组 合 、 绘 制 带 阴影 的 图 形 、 使 用 图 像 、 绘 制 文字 和 图 形 的 保存 和 恢复 等 。 

第 17 章 介 绍 在 HTML5 中 的 音频 和 视频 ， 包 括 <audio> 标 记 和 <video> 标 记 等 。 

第 18 章 介 绍 地 理 定位 和 离线 Web 应 用 , 包括 地 理 定位 、 离 线 Web 应 用 和 Web 存储 技术 。 

第 19 章 介绍 使 用 jQuery Mobile 设计 移动 页 面 ， 包 括 jQuery Mobile 概述 、 跨 平台 移动 设 
备 网 页 、jQuery Mobile 网 页 的 架构 、 使 用 UI 组 件 、 导 航 条 、 使 用 jQuery Mobile 主题 、 创 建 多 
页 面 的 jQuery Mobile 网 页 、 制 作对 话 杠 效果、 绚丽 多 彩 的 页 面 切换 效果 。 

第 20 章 介 绍 企业 门户 型 网 站 的 综合 实战 案例 。 

第 21 章 介绍 在 线 游戏 类 网 站 的 综合 实战 案例 。 

第 22 章 介绍 手机 移动 类 网 站 的 综合 实战 案例 。 


本 书 特色 


知识 全 面 : 知识 由 浅 入 深 ， 涵 盖 所 有 HTML5、CSS3 和 JavaScript 知识 点 ， 便 于 读者 循序 
渐进 地 掌握 HTML5 +CSS3+JavaScript 网 页 布局 技术 。 

图 文 并 茂 : 注重 操作 ， 图 文 并 茂 ， 在 介绍 案例 的 过 程 中 ， 每 一 个 操作 均 有 对 应 的 插图 。 这 
种 图 文 结合 的 方式 使 读者 在 学 习 过 程 中 能 够 直观 、 清 晰 地 看 到 操作 的 过 程 以 及 效果 ， 便 于 更 快 
地 理解 和 掌握 。 

易学 易 用 : 颠覆 传统 “看 ” 书 的 观念 ， 变 成 一 本 能 “操作 ”的 图 书 。 

案例 丰富 : 把 知识 点 融 汇 于 系统 的 案例 实 训 当 中 ， 并 且 结 合 经 典 案例 进行 讲解 和 拓展 ， 进 
而 达到 “ 知 其 然 ， 并 知 其 所 以 然 ”的 效果 。 

贴心 周到 : 本 书 对 读者 在 学 习 过 程 中 可 能 会 遇 到 的 疑难 问题 以 “提示 ”和 “技巧 ”的 形式 
进行 了 说 明 ， 以 免 读 者 在 学 习 的 过 程 中 走 弯路 。 

代码 支持 : 本 书 提供 实例 和 综合 实战 案例 的 源 代 码 ， 可 让 读者 在 实战 应 用 中 掌握 网 页 布 
的 每 一 项 技能 ， 真 正体 现 “自学 无 忧 ”， 是 一 本 物 超 所 值 的 好 书 。 

技术 支持 : 读者 可 加 入 QQ 群 941230971， 索 要 源 代 码 、 教 学 幻灯 片 和 精品 教学 视频 ， 讨 
论 相 关 问 题 。 


读者 对 象 


本 书 是 一 本 完整 介绍 HTML5+CSS3+JavaScript 网 页 制作 技术 的 教程 ， 内 容 丰 富 ， 条 理 清 
蜥 ， 实 用 性 强 ， 适合 如 下 读者 学 习 使 用 : 


。 对 网 页 制作 有 兴趣 的 读者 ， 可 以 快速 上 手 制作 精美 网 页 。 
e 对 从 事 美工 工作 的 读者 ， 是 必 不 可 少 的 工具 书 。 


可 


源码 、 课 件 与 教学 视频 下 载 人 
本 书 源码 课件 与 教学 视频 下 载 地址 请 扫描 右边 二 维 码 获 取 。 如 果 下 载 BE 
有 问题 ， 请 联系 booksaga@163.com， 邮 件 主题 为 “精通 H5C3JS”。 
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第 1 章 HTML5 快 速 入 门 


目前 网 络 已 经 成 为 人 们 生活 、 工 作 中 不 可 缺少 的 一 部 分 ,网 页 设计 也 成 为 学 习 计算 机 的 重 

要 内 容 之 一 。 制 作 网 页 可 采用 可 视 化 编辑 软件 ， 但 是 无 论 采 用 哪 一 种 网 页 编辑 软件 ， 最 后 都 是 

将 所 设计 的 网 页 转化 为 HTML。HTML 是 网 页 的 基础 语言 ， 因 此 本 章 就 来 介绍 HTML 的 基本 

念 、 编 写 方法 及 浏览 HTML 文件 的 方法 ， 使 读者 初步 了 解 HTML， 从 而 为 后 面 的 学 习 打下 
基础 。 


1.1 HTML5 概述 


因特网 上 的 信息 是 以 网 页 的 形式 展示 给 用 户 的 ， 因 此 网 页 是 网 络 信息 传递 的 载体 。 网 页 文 
件 是 用 一 种 标记 语言 书写 的 ， 这 种 语言 称 为 HTML (Hyper Text Markup Language， 超 文本 标记 
语言 ) 。 

HTML 是 一 种 标记 语言 ， 而 不 是 一 种 编程 语言 ， 主 要 用 于 描述 超 文本 中 内 容 的 显示 方式 。 
标记 语言 从 诞生 到 今天 ， 经 历 了 二 十 几 载 ， 发 展 过 程 中 也 有 很 多 曲折 ， 经 历 的 版 本 及 发 布 日 期 
如 表 1-1 所 示 。 


表 1-1 HTML 经 历 的 版 本 


超 文本 标记 语 | 1993 年 6 月 作为 互联 网 工程 工作 小 组 (IETF) 工作 草案 发 布 〔 并 非 标准 ) 
言 (第 一 版 ) 


HIML 2.0 1995 年 11 月 作为 RFC 1866 发 布 ， 在 RFC 2854 于 2000 年 6 月 发 布 之 后 被 


宣布 已 经 过 时 
1996 年 1 月 14 日 | W3C (万 维 网 联盟 ) 推荐 标准 
1997 年 12 月 18 日 | W3C 推荐 标准 
1999 年 12 月 24 日 | 微小 改进 ，W3C 推荐 标准 
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( 续 表 ) 


2000 年 5 月 15 日 | 基于 严格 的 HIML 4.01 语法 , 是 国际 标准 化 组 织 和 国际 电工 委 
员 会 的 标准 


2000 年 1 月 26 日 | W3C 推荐 标准 ， 后 来 经 过 修订 于 2002 年 8 月 1 日 重新 发 布 


XHTML 1.1 2001 年 5 月 31 日 | 较 1.0 有 微小 改进 

XHTML 2.0 草 | 没有 发 布 2009 年 ，W3C 停止 了 XHTML 2.0 工作 组 的 工作 
案 
HIML 5 2014 年 10 月 W3C 推荐 标准 


HTML 是 一 种 标记 语言 ， 经 过 浏览 器 的 解释 和 编译 ， 虽 然 本 身 不 能 显示 在 浏览 器 中 , 但 是 
在 浏览 器 中 可 以 正确 显示 HTML 标记 的 内 容 。HTML 语言 从 1.0 至 5.0 经 历 了 巨大 的 变化 ， 从 
单一 的 文本 显示 功能 到 图 文 并 茂 的 多 媒体 显示 功能 ， 许 多 特性 经 过 多 年 的 完善 ， 已 经 成 为 一 种 
非常 完善 的 标记 语言 。 尤 其 是 HTML5， 对 多 媒体 的 支持 功能 更 强 ， 它 新 增 功能 如 下 : 


新 增 语义 化 标记 ， 使 文档 结构 明确 
新 的 文档 对 象 模型 ( DOM ) 

实现 2D 绘图 的 canvas 对 象 

可 控 媒 体 播放 

离线 存储 

文档 编辑 

拖 放 

跨 文档 消息 

浏览 器 历史 管理 
MIME 类 型 和 协议 注册 


对 于 这 些 新 功能 ,支持 HIMLS 的 浏览 器 在 处 理 HTML 代码 错误 的 时 候 会 更 灵活 ， 而 那些 
不 支持 HIMLS 的 浏览 器 将 忽略 HIMLS 代码 。 

HTMLS5 不 是 一 种 编程 语言 ， 而 是 一 种 描述 性 的 标记 语言 ， 用 于 描述 超 文本 中 的 内 容 和 结 
构 。HTML 最 基本 的 语法 是 < 标记 符 ></ 标 记 符 >。 标 记 符 通常 都 是 成 对 使 用 ， 有 一 个 开头 标记 
和 一 个 结束 标记 。 结 束 标记 只 是 在 开头 标记 的 前 面 加 一 个 斜 本 “/”。 当 浏览 器 收 到 HTML 文 
件 后 ， 就 会 解释 里 面 的 标记 符 ， 然 后 把 标记 符 相 对 应 的 功能 表达 出 来 。 

如 在 HTML 中 用 <p></p> 标 记 符 来 定义 一 个 段落 , 用 <br> 标 记 符 来 定义 一 个 换行 符 。 当 浏 
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览 器 遇 到 <p></p> 标 记 符 时 ， 会 把 该 标记 中 的 内 容 自动 形成 一 个 段落 。 当 遇 到 <br> 标 记 符 时 ， 
会 自动 换行 ， 并 且 该 标记 符 后 的 内 容 会 从 一 个 新 行 开 始 。 这 里 的 <br> 标 记 符 是 单 标记 ， 没 有 结 
束 标记 ， 标 记 后 的 “/” 符 号 可 以 省 略 ， 为 了 规范 代码 ， 一 般 建议 加 上 。 


1.2 HTML5 的 文档 结构 
HTML5 文档 最 基本 的 结构 主要 包括 文档 类 型 说 明 、 文 档 开始 标记 、 元 信息 、 主 体 标记 和 
页 面 注 释 标记 。 
1.2.1 文档 类 型 说 明 


HTMLS5 设计 准则 中 最 重要 的 一 条 是 化 繁 为 简 ，Web 页 面 的 文档 类 型 说 明 (Doctype) 被 极 
大 地 简化 了 。 
在 HIML4 或 早期 的 版 本 中 ， 创 建 HTML 文档 时 ， 文 档 头 部 的 类 型 说 明代 码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.0org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 


上 面 为 XHTML 文档 类 型 说 明 ， 读 者 可 以 看 到 这 段 代 码 既 麻烦 又 难 记 ，HTML5 对 文档 类 
型 进行 了 简化 ， 简 单 到 15 个 字符 就 可 以 了 ， 代 码 如 下 : 


<!DOCTYPE html> 
波 Docype 声明 需要 出 现在 HTM 文件 的 第 一 行 。 
枝 巧 禄 示 
1.2.2 HTML 标记 


HTML 标记 代表 文档 的 开始 ， 由 于 HTML 语言 语法 的 松散 特性 ， 该 标记 可 以 省 略 ， 但 是 
为 了 使 之 符合 Web 标准 和 文档 的 完整 性 ， 用 户 要 养 成 良好 的 编写 习惯 ， 建 议 不 要 省 略 该 标记 。 

HTML 标记 以 <html> 开 头 ， 以 </html> 结 尾 ， 文 档 的 所 有 内 容 书 写 在 开头 和 结尾 的 中 间 部 
分 。 语 法 格式 如 下 : 


<html> 
ee 
1.2.3 ” 头 标 记 head 
头 标记 head 用 于 说 明文 档 头 部 相关 信息 ， 一 般 包括 标题 信息 、 元 信息 、 定 义 CSS 样式 和 
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脚本 代码 等 。HTML 的 头 部 信息 是 以 <head> 开 始 ， 以 </head> 结 束 ， 语 法 格式 如 下 : 
<head> 


</head> 


-<head> 元 素 的 作用 范围 是 整 篇 文档 ， 定 义 在 HTML 文档 头 部 的 内 容 往往 不 会 在 网 
| 页 上 直接 显示 。 


1. 标题 标记 title 

HTML 页 面 的 标题 一 般 用 来 说 明 页 面 的 用 途 ， 显 示 在 浏览 器 的 标题 栏 中 。 在 HTML 文档 
中 ， 标 题 信 息 设置 在 <head> 与 </head> 之 间 。 标 题 标记 以 <title> 开 始 ， 以 </title> 结 束 ， 语 法 格式 
如 下 : 


<title> 
es 
在 标记 中 间 的 “... ”就 是 标题 的 内 容 ， 可 以 帮助 用 户 更 好 地 识别 页 面 。 预 览 网 页 时 ， 设 


置 的 标题 在 浏览 器 的 左上 方 标题 栏 中 显示 〈 如 图 1-1 所 示 ) 。 页 面 的 标题 只 有 一 个 ， 在 HTML 
文档 的 头 部 ， 即 <head> 和 </head> 之 间 。 


印 “Dx\ 源 代码 HTMI 图 ”搜索 .… 


标题 标记 title 


行 之 贵 日 新 。 


图 1-1 标题 栏 在 浏览 器 中 的 显示 效果 


2. 元 信息 标记 meta 

<meta> 标 记 可 提供 有 关 页 面 的 元 信息 (meta-information) ， 比 如 针对 搜索 引擎 和 更 新 频 度 
的 描述 和 关键 词 。 

<meta> 标 记 位 于 文档 的 头 部 , 不 包含 任何 内 容 。<meta> 标 记 的 属性 定义 了 与 文档 相关 联 的 
名 称 / 值 ，<meta> 标 记 提供 的 属性 及 取 值 见 表 1-2。 
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表 1-2 <meta> 标 记 提供 的 属性 及 取 值 


属性 值 描述 

charset character encoding 定义 文档 的 字符 编码 

content Some text 定义 与 http-equiv 或 name 属性 相 关 的 元 信 息 
content-type 


expires 
refresh 


set-cookie 


http-equiv 把 content 属性 关联 到 HTTP 头 部 


author 

description 

k d 

name Ss 把 content 属性 关联 到 一 个 名 称 


generator 
revised 


Others 


(1) 字符 集 charset 属性 
在 HIML5 中 ， 有 一 个 新 的 charset 属性 ， 使 字符 集 的 定义 更 加 容易 。 例 如 ， 下 列 代码 告 ; 
浏览 器 ， 网 页 使 用 “ISO-8859-1” 字 符 集 显 示 ， 代 码 如 下 所 示 。 


<meta charset="ISO-8859-1"> 

(2) 搜索 引擎 的 关键 字 

早期 ，meta keywords 关键 字 对 搜索 引擎 的 排名 算法 起 到 一 定 的 作用 ， 是 很 多 人 进行 网 页 

优化 的 基础 。 关 键 字 在 浏览 时 是 看 不 到 的 ， 使 用 格式 如 下 。 

<meta name="keywords"” content=" 关 键 字 , keywords" /> 

说 明 : 

@ 不同 的 关键 字 之 间 ， 应 用 半角 过 号 隔 开 (英文 输入 状态 下 )， 不 要 使 用 “空格 ” 
或 “|” 间 隔 。 
是 keywords， 不 是 keyword。 
关键 字 标 签 中 的 内 容 应 该 是 一 个 个 的 短语 ， 而 不 是 一 段 话 。 

例如 ， 定 义 针对 搜索 引擎 的 关键 词 ， 代 码 如 下 : 


<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" /> 


关键 字 标 记 keywords， 曾 经 是 搜索 引擎 排名 中 很 重要 的 因素 , 但 现在 已 经 被 很 多 搜索 引擎 
完全 忽略 。 加 上 这 个 标记 对 网 页 的 综合 表现 没有 坏处 ， 不 过 如 果 使 用 不 恰当 ， 对 网 页 非但 没有 
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好 处 ， 还 有 欺诈 的 嫌疑 。 在 使 用 关键 字 标 记 keywords 时 ， 要 注意 以 下 几 点 : 


@。 关键 字 标 记 中 的 内 容 要 与 网 页 核心 内 容 相关 ， 确 信使 用 的 关键 字 字 出 现在 网 页 文 


本 中 。 
@ ”使 用 用 户 易 于 通过 搜索 引擎 检索 的 关键 字 ， 过 于 生僻 的 词汇 不 太 适 合 做 meta 标 
记 中 的 关键 字 。 


@ 不 要 重复 使 用 关键 字 ， 否 则 可 能 会 被 搜索 引擎 惩罚 。 
一 个 网 页 的 关键 字 标 记 里 最 多 包含 5 个 重要 的 关键 字 ， 不 要 超过 5 个 。 

@ 每 个 网 页 的 关键 字 应 该 不 一 样 。 
由 于 设计 者 或 SEO 优化 者 以 前 对 meta keywords 关键 字 的 洪 用 ,导致 目前 它 在 搜索 
ca 引擎 排名 中 的 作用 很 小 。 

(3) 页 面 描述 

meta description〈 描 述 元 标记 ) 是 一 种 HTML 元 标记 ， 用 来 简略 描述 网 页 的 主要 内 容 ， 通 
常 被 搜索 引擎 用 于 搜索 结果 页 上 展示 给 最 终 用 户 看 的 一 段 文字 片段 。 页 面 描述 在 网 页 中 是 不 显 
示 出 来 的 ， 使 用 格式 如 下 : 


<meta name="description" content=" 网 页 的 介绍 " /> 


例如 ， 定 义 对 页 面 的 描述 ， 代 码 如 下 : 

<meta name="description" content=" 免 费 的 web 技术 教程 。" /> 

(4) 页 面 定 时 跳 转 

使 用 <meta> 标 记 可 以 使 网 页 在 经 过 一 定时 间 后 自动 刷新 ， 这 可 通过 将 http-equiv 属性 值 设 
置 为 refresh 来 实现 。content 属性 值 可 以 设置 为 更 新 时 间 。 

在 浏览 网 页 时 经 常会 看 到 一 些 欢 迎 信息 的 页 面 ， 在 经 过 一 段 时 间 后 ， 这 些 页 面 会 自动 转 到 
其 他 页 面 ， 这 就 是 网 页 的 跳 转 。 页 面 定时 刷新 跳 转 的 语法 格式 如 下 : 


<meta http-equiv="refresh" content=" 秒 ; [url= 网 址 ]" /> 


说 明 : 上 面 的 “[url= 网 址 ]” 部 分 是 可 选项 。 如 果 有 这 部 分 ， 页 面 定 时 刷新 并 跳 转 ， 如 果 
省 略 该 部 分 ， 页 面 只 定时 刷新 ， 不 进行 跳 转 。 
例如 ， 实 现 每 5 秒 刷新 一 次 页 面 ， 将 下 述 代 码 放 入 head 标记 部 分 即 可 。 


<meta http-equiv="refresh" content="5" /> 
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1.2.4 网 页 的 主体 标记 body 


网 页 所 要 显示 的 内 容 都 放 在 网 页 的 主体 标记 内 ， 是 HIML 文件 的 重点 所 在 ， 后 面 章节 所 
要 介绍 的 HIML 标记 都 将 放 在 这 个 标记 内 。 然 而 它 并 不 仅仅 是 一 个 形式 上 的 标记 ， 它 本 身 也 
可 以 控制 网 页 的 背景 颜色 或 背景 图 像 ， 这 会 在 后 面 进行 介绍 。 主 体 标 记 以 <body> 开 始 、 以 
</body> 结 束 ， 语 法 格式 如 下 : 


<body> 
</body> 


注意 ， 在 构建 HTML 结构 时 ， 标 记 不 允许 交叉 出 现 ， 否 则 会 造成 错误 。 

例如 ， 在 下 列 代 码 中 ，<body> 开 始 标记 出 现在 <head> 标 记 内 。 

<html> 

<head> 

<title> 标 记 测试 </title> 

<body> 

</head> 

</body> 

</html> 

代码 中 的 第 4 行 <body> 开 始 标 记 和 第 5 行 的 </head> 结 束 标记 出 现 了 交叉 ， 这 是 错误 的 。 
HTML 中 的 所 有 标记 都 是 不 允许 交叉 出 现 的 。 


1.2.5 ”页 面 注释 标记 <!-- --> 


注释 是 在 HTML 代码 中 插入 的 描述 性 文本 ， 用 来 解释 该 代码 或 提示 其 他 信息 。 注 释 只 出 
现在 代码 中 ， 浏 览 器 对 注释 代码 不 进行 解释 ， 并 且 在 浏览 器 的 页 面 中 不 显示 。 在 HTML 源 代 
码 中 适当 地 插入 注释 语句 是 一 种 非常 好 的 习惯 。 对 于 设计 者 日 后 的 代码 修改 、 维 护 工作 很 有 好 
处 。 另 外 ， 如 果 将 代码 交 给 其 他 设计 者 ， 其 他 人 也 能 很 快 读 懂 前 者 所 撰写 的 内 容 。 

语法 格式 如 下 : 


<!- -注释 的 内 容 --> 


注释 语句 元 素 由 前 后 两 半 部 分 组 成 ， 前 半 部 分 一 个 左 尖 括号 、 一 个 半角 感叹 号 和 两 个 连 字 
符 ， 后 半 部 分 由 两 个 连 字符 和 一 个 右 尖 括 号 组 成 。 


<html> 

<head> 
<title> 标 记 测试 </title> 
</head> 
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<body> 

<!-- 这 里 是 标题 --> 
<h1>HTML5 从 入 门 到 精通 </h1> 
</body> 

</html> 


页 面 注释 不 但 可 以 对 HTML 中 一 行 或 多 行 代码 进行 解释 说 明 ， 而 且 可 以 注释 掉 这 些 代码 。 
如 果 希 望 某 些 HTML 代码 在 浏览 器 中 不 显示 ， 可 以 将 这 部 分 内 容 放 在 <!-- 和 --> 之 间 。 例 如 ， 修 
改 上 述 代码 ， 如 下 所 示 : 

<html> 

<head> 

<title> 标 记 测试 </title> 

</head> 

<body> 

<!-- 

<hl1>HTML5 从 入 门 到 精通 </h1> 

--> 

</body> 

</html> 


修改 后 的 代码 ， 将 <h1> 标 记 作为 注释 内 容 处 理 ， 在 浏览 器 中 将 不 会 显示 。 


1.3 ”HTML5 文件 的 编写 方法 


有 两 种 方式 来 产生 HTML 文件 : 一 种 是 自己 写 HTML 文件 ， 事 实 上 这 并 不 是 很 困难 ， 也 
不 需要 特别 的 技巧 ， 另 一 种 是 使 用 HIML 编辑 器 ， 它 可 以 辅助 使 用 者 来 做 编写 的 工作 。 


1.3.1 使 用 记事 本 手工 编写 HTML 文件 


前 面 介 绍 到 HTMLS 是 一 种 标记 语言 (标记 语言 代码 是 以 文本 形式 存在 的 ) ， 因 此 所 有 的 
记事 本 工具 都 可 以 作为 它 的 开发 环境 。HTML 文件 的 扩展 名 为 .html 或 .htm， 将 HTML 源 代码 
输入 到 记事 本 并 保存 之 后 ， 可 以 在 浏览 器 中 打开 文档 以 查看 其 效果 。 

使 用 记事 本 编写 HTML 文件 ， 具 体操 作 步 又 如 下 : 


有 @ 册 单 击 Windows 桌面 上 的 【开始 〗 按钮， 选择 【所 有 程序 】>【 附 件 〗 汪 【记事 本 】 
命令 ， 打 开 一 个 记事 本 ， 在 记事 本 中 输入 HIML 代码 ， 如 图 1-2 所 示 。 

上 好 编辑 完 HIML 文件 后 ， 选 择 【 文 件 〗> 【保存 】〗 命 令 或 按 CtrltS 组 合 键 ， 在 弹出 的 
【另存 为 〗】 对 话 框 中 选择 【保存 类 型 】 为 【所 有 文件 】， 然 后 将 文件 扩展 名 设 为 .html 或 .htm， 
如 图 1-3 所 示 。 
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司 记过 本 高 于 HTML 文件 bt - 记 李 本 三 口 X EE 
六 件 (RD 绵 各 ( 昌 属 式 (O) 喜 看 (V】 项 动 (H] 


ed 钳 杠 叶 暗 整 花 红 。 两 岸 人 家 微 两 后 ， 收 红豆 ， 树 底 纤 纤 抬 素 于 。 ee 
chtaj> Du 


~ Rare 二 En 国医 二 3 my 


图 1-2 编辑 HTML 代码 图 1-3 【另存 为 】 对 话 框 


L@ 到 单 击 【 保 存 】 按 钮 ， 保 存 文件 。 打 开 网 页 文档 ， 在 IE 浏览 器 中 预览 效果 ， 如 图 1-4 
所 示 。 
| | DA 滨 代 BB\Ch01\Ez 禾 ~ 节 。 提要 Pp- 
[8 第 一 个 网 页 * 右 
| 文件 (F) 各 和 (E) 查看 (V】 收藏 天 (A) 工具 (T) 帮助 (H) 


请 向 一 下 , fs 
路 入 南 中 ， 桃 焰 叶 暗 要 花红 ,两岸 人 家 微 十 后 ， 收 红豆 ， 树 确 纤 纤 拍 素 手 .。 


图 1-4 网 页 的 浏览 效果 


1.3.2 ”使 用 Dreamweaver CC 编写 HTML 文件 


常言 道 : “ 工 欲 善 其 事 ， 必 先 利 其 器 ”。 虽 然 使 用 记事 本 可 以 编写 HTML 文件 ， 但 是 编 
写 效率 太 低 ， 对 于 语法 错误 及 格式 都 没有 提示 ， 因 此 ， 可 以 使 用 专门 编写 HTML 网 页 的 工具 
来 弥补 这 种 缺陷 。Adobe 公司 的 Dreamweaver CC 用 户 界 面 非常 友好 ， 是 一 个 非常 优秀 的 网 页 
开发 工具 ， 深 受 广大 用 户 的 喜爱 。 

使 用 Dreamweaver CC 编写 HTML 文件 ， 有 具体 操作 步骤 如 下 : 


IO 册 启动 Dreamweaver CC (如 图 1-5 所 示 ), 在 欢迎 屏幕 的 【新 建 〗 栏 中 选择 HTML 选项 ， 
或 者 单 击 菜单 中 的 【文件 〗>【 新 建 〗 命 令 (快捷 键 CtrLHN)。 

I@ 到 弹出 【新 建文 档 】〗 对 话 框 ( 如 图 1-6 所 示 ) ， 在 【页 面 类 型 〗 选 项 区 中 选择 HTML 选 
项 ， 在 【文档 类 型 〗 中 选择 【HTML 5】〗 选 项 。 
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图 1-5 包含 欢迎 屏幕 的 主 界面 图 1-6 【文档 类 型 】 对 话 框 


i@ 旨 单 击 【 创 建 】 按 钮 ， 创 建 HTML 文件， 如 图 1-7 所 示 。 
i@ 细 在 文档 工具 栏 中 ， 单 击 【 人 代码】 按钮 ， 切 换 到 代码 视图 ， 如 图 1-8 所 示 。 


Dw 加 ”9 a wi - [lel x 
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umed1 x 导 计 maf. 
| 慌 双 | 激 分 [设计 | 去 厅 两 图 者. 加 允 中 上 应 夺 本 


i [代码 ] 拆 分 | 设计 “实时 视图 哆 . 加. 对 bp% FF 
交 计 刘 上 宁 多 风 生 全 23 <!ldoctype html> 

2 a 

<head> 

<meta charset="utf-8"> 

<title> 无 标题 文档 </title> 

</head> 


<body| 
</body> 
</html> 


图 1-7 设计 视图 下 显示 创建 的 文件 图 1-8 代码 视图 下 显示 创建 的 文件 


条 
也 


们 加 修改 HTML 文件 标题 ， 将 代码 中 <title> 标 记 中 的 “无 标题 文档 ”修改 成 “ 蝶 恋 花 "。 
{@g 在 <body> 标 记 中 输入 “ 溪 上 平 岗 千 登 池 ， 万 树 亭 享 ， 争 作 竹 云 势 。。， 完 整 HTML 代 
码 如 下 所 示 。 


<!DOCTYPE html> 

<head> 

<meta charset=utf-8" /> 
<title> 蝶 恋 花 </title> 

</head> 

<body> 

溪 上 平 岗 千 受 浴 ， 万 树 享 享 ， 争 作 丢 云 势 。 
</body> 

</html> 


[0 到 保存 文件 。 单 击 菜单 中 的 【文件 】>>【 保 在】 命令 或 按 CtrlHS 组 合 键 ， 弹 出 【另存 
为 】 对 话 框 。 在 对 话 框 中 ， 选 择 保存 位 置 并 输入 文件 名 ， 单 击 【 保 存 】 按 钮 ， 如 图 1-9 所 示 。 
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QB 单 击 文档 工具 栏 中 的 国 . 图标， 选择 查看 网 页 的 浏览 器 ， 或 按 下 功能 键 F12 使 用 默 
认 浏 览 器 查看 网 页 ， 预 览 效 果 如 图 1-10 所 示 。 


x 


图 1-9 保存 文件 


国 3 为 x 
mi: [dm -68PGr 
we poss oa | 一 口 
a Ee | 
加 
mn 导 蝶 恋 花 x 
文件 (F) 编辑 (E) 查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 
sn 请 当 百 度 一 下 ,你 就 知道 
这 5 一 四 
ee 溪 上 平 岗 千 司职 ， 万 树 享 享 ， 争 作 役 云 势 。 
AD 
口 


图 1-10 浏览 器 预览 效果 


1.4 HTML5 语法 的 新 变化 


为 了 兼容 各 个 不 统一 的 页 面 代码 ，HTMLS 的 设计 在 语法 方面 做 了 以 下 变化 。 


1.4.1 标签 不 再 区 分 大 小 写 


标签 不 再 区 分 大 小 写 是 HTMLS 语法 变化 的 重要 体现 ， 例 如 : 


<!DOCTYPE html> 
<html> 
<head> 


<title> 不 再 区 别 大 小 写 标签 </title> 


</head> 
<BODY> 


人 到 情 多 情 转 薄 ， 而 今 真 个 不 多 情 。 


</body> 
</html> 


在 IE 11.0 浏览 器 中 预览 ， 效 果 如 图 1-11 所 示 。 


口 x 


站 _D:N 原 ft 三 \chO1\1.1ht 图 ”搜索 
忆 不 再 区 别 大 小 号 标签 


文件 (F) 匾 辑 (E) 查看 (V) 收藏 夫 (A) 工具 (TD 帮助 (H) 
请 名 百 区 下, 你 吕 和 0 各 


人 到 情 多 情 转 落 ， 而 今 真 个 不 多 情 。 


图 1-11 


网 页 预览 效果 
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虽然 “<BODY> 人 到 情 多 情 转 薄 ， 而 今 真 个 不 多 情 。</body>” 中 开始 标记 和 结束 标记 不 
匹配 ， 但 是 这 完全 符合 HIMLS 的 规范 。 用 户 可 以 通过 W3C 提供 的 在 线 验 证 页 面 来 测试 上 面 
的 网 页 ， 验 证 网 址 为 http://validator.w3.org/。 


1.4.2 ”允许 属性 值 不 使 用 引号 
在 HTMLS5 中 ， 属 性 值 不 放 在 引号 中 也 是 正确 的 。 例 如 以 下 代码 片段 : 


<input checked="a" type="checkbox"/> 
<input readonly type="text"/> 
<input disabled="a" type="text"/> 


上 述 代 码 片段 与 下 面 的 代码 片段 效果 是 一 样 的 : 


<input checked=a type=checkbox/> 
<input readonly type=text/> 
<input disabled=a type=text/> 


注意 : 虽然 HIMLS 允许 属性 值 可 以 不 使 用 引号 ， 但 是 仍然 建议 读者 加 上 引号 。 因 为 如 果 
某 个 属性 的 属性 值 中 包含 空格 等 容易 引起 混淆 的 属性 值 ， 此 时 可 能 会 引起 浏览 器 的 误解 。 例 如 
以 下 代码 : 

<img src=ss ch01/1.1.jpg /> 

此 时 浏览 器 就 会 误 以 为 src 属性 的 值 就 是 ss， 这样 就 无 法 解析 路 径 中 的 1.1.jpg 图 片 。 如 果 
想 正确 解析 到 图 片 的 位 置 ， 只 有 添加 上 引号 。 
1.4.3 ”允许 部 分 属性 值 的 属性 省 略 

在 HTML5 中 ， 部 分 标志 性 属性 的 属性 值 可 以 省 略 。 例 如 ， 以 下 代码 是 完全 符合 HIML5 
规则 的 : 


<input checked type="checkbox"/> 
<input readonly type="text"/> 


其 中 ，checked="checked" 省 略为 checked， 而 readonly="readonly" 省 略为 readonly。 
在 HTMLS5 中 ， 可 以 省 略 属性 值 的 属性 如 表 1-3 所 示 。 
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表 1-3 可 以 省 略 属性 值 的 属性 
属 性 省 略 属性 值 
二 省 略 属性 值 后 ， 等 价 于 checked="checked" 
省 略 属性 值 后 ， 等 价 于 readonly="readonly" 
省 略 属性 值 后 ， 等 价 于 defer="defer" 
| smap | 省 格 届 性 值 后 ， 等 价 于 isamap-"iamapy 
[mm 


nohref 省 略 属性 值 后 ， 等 价 于 nohre 全 "nohref" 


省 略 属性 值 后 ， 等 价 于 noshade="noshade" 


selected 省 略 属性 值 后 ， 等 价 于 selected="selected" 


省 略 属 性 值 后 ， 等 价 于 disabled="disabled" 
省 略 属性 值 后 ， 等 价 于 multiple="multiple" 
[noresize | 省 略 属性 值 后 ， 等 价 于 noresize="noresize" 


[mm | 省 略 属性 值 后 ， 等 价 于 nowrap="nowrap" 


1.5 专家 解 惑 


问题 1 : 如 何 理解 HTML5 中 的 单 标记 和 双 标 记 书写 方法 ? 

HTML5 中 的 标记 分 为 单 标 记 和 双 标 记 。 所 谓 单 标 记 是 指 没 有 结束 标记 的 标记 ， 双 标记 是 
指 既 有 开始 标记 又 包含 结束 标记 。 

对 于 不 允许 写 结束 标记 的 单 标记 元 素 ， 只 可 以 使 用 “< 元 素 旅 ”的 形式 进行 书写 。 例 如 
“<br>.…</br> ”的 书写 方式 是 错误 的 ， 正 确 的 书写 方式 为 <br>。 当 然 ,， 在 HIMLS 之 前 的 版 本 
中 <br> 这 种 书写 方法 可 以 被 沿用 。HTMLS 中 不 允许 写 结束 标记 的 元 素 有 area、base、br 、col、 
command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr。 

对 于 部 分 双 标记 可 以 省 略 结束 标记 。HTML5 中 人 允许 省 略 结 束 标记 的 元 素 有 li、dt、dd、p、 
rt、 tp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、 了 h。 

HTML5 中 有 些 元 素 还 可 以 完全 被 省 略 标记 ， 即 使 这 些 标记 被 省 略 了 ， 该 元 素 还 是 以 隐 式 
的 方式 存在 的 。HTML5 中 允许 省 略 全 部 标记 的 元 素 有 html、head、body、colgroup、tbody。 

问题 2 : 为 何 使 用 记事 本 编辑 HTML 文件 无 法 在 浏览 器 中 预览 ， 而 是 直接 在 记事 本 
中 打开 ? 

很 多 初学 者 ， 保 存 文件 时 ， 没 有 将 HIML 文件 的 扩展 名 .html 或 .htm 作为 文件 的 后 组 ， 导 
致 文件 还 是 以 .txt 为 扩展 名 ， 因 此 无 法 在 浏览 器 中 查看 。 如 果 读 者 是 通过 右 击 ， 创 建 记事 本 文 


精通 HTYL54+CSS3+JavaScript 网 页 设计 〈 视 频 教学 版 ) 〈 第 2 版 ) 


件 , 那么 在 给 文件 重 命名 时 一 定 要 以 html 或 .htm 作为 文件 的 后 绥 。 特别 要 注意 的 是 当 Windows 
系统 的 扩展 名 隐藏 时 ， 更 容易 出 现 这 样 的 错误 。 读 者 可 以 在 【文件 夹 选项 】 对 话 框 中 设置 是 否 
显示 扩展 名 。 

问题 3 : 在 网 页 中 ， 语 言 的 编码 方式 有 哪些 ? 

在 HIMLS 网 页 中 ，<meta> 标 记 的 charset 属性 用 于 设置 网 页 的 内 码 语系 ， 也 就 是 字符 集 
的 类 型 。 国 内 常用 的 是 GB 码 ， 由 于 经 常 要 显示 汉字 ， 因 此 通常 设置 为 “GB2312”( 简 体 中 文 》 
和 “UTF-8” 两 种 。 英 文 是 “ISO-8859-1” 字 符 集 。 此 外 还 有 其 他 的 字符 集 ， 这 里 不 再 介绍 。 


第 2 章 HTML5 网 页 中 的 文本 和 图 像 


文字 和 图 像 是 网 页 中 最 主要 也 是 最 常用 的 元 素 。 这 一 章 将 开始 讲解 如 何在 网 页 中 使 用 文 
字 、 文 字 结构 标记 以 及 图 像 的 方法 。 


2.1 添加 文本 
网 页 中 的 文本 可 以 分 为 两 大 类 ， 一 类 是 普通 文本 ， 另 一 类 是 特殊 字符 文本 。 


2.1.1 普通 文本 


所 谓 普通 文本 是 指 汉字 或 者 在 键盘 上 可 以 输出 的 字符 。 读 者 可 以 在 Dreamweaver CC 代码 
视图 的 <body> 标 记 部 分 直接 输入 ， 或 者 在 设计 视图 下 直接 输入 。 

如 果 有 现成 的 文本 ， 可 以 使 用 复制 的 方法 把 其 他 窗口 中 需要 的 文本 复制 过 来 。 在 粘贴 文本 
的 时 候 ， 如 果 只 希望 把 文字 粘贴 过 来 , 而 不 需要 粘贴 文档 中 的 格式 , 可 以 使 用 Dreamweaver CC 
的 “选择 性 粘贴 ”功能 。 

“选择 性 粘贴 ”功能 只 在 Dreamweaver CC 的 设计 视图 中 起 作用 ， 因 为 在 代码 视图 中 粘贴 
的 仅 文本 ， 不 会 有 格式 。 例 如 ， 将 Word 文档 表格 中 的 文字 复制 到 网 页 中 ， 而 不 需要 表格 结构 ， 
其 操作 方法 为 选择 【编辑 】 关 【选择 性 粘贴 】 选 项 或 按 下 快捷 键 ShiftkCtrl+V， 弹 出 【选择 性 
粘贴 】 对 话 框 ， 在 对 话 框 中 选中 【 仅 文本 】 单 选 按钮 即 可 ， 如 图 2-1 所 示 。 


选择 性 粘贴 x 
二 村 CE 
图 仅 文本 (T) 

口 芒 结 构 的 文本 《段落 、 列 表 、 表 格 等 ) (S) 取消 () 


口蘑 结构 的 文本 以 及 基本 格式 《 粗 体 、 幸 体 ) (B) 

站 营 结 构 的 文本 以 及 全 部 格式 〈 粗 体 、 土 体 、 样 式 ) 人) 
保留 换行 符 (R) 
清理 Yord 段落 间距 (L) 

口 将 智能 引号 转换 为 直 引 号 (Q) 


粘贴 首选 参数 (P) . . 


帮助 (8) 


图 2-1 【选择 性 粘贴 】 对 话 框 
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2.1.2 ”特殊 文字 符号 


目前 ， 很 多 行业 上 的 信息 都 出 现在 网 络 上 ， 每 个 行业 都 有 自己 的 行业 特性 ， 如 数学 、 物 理 
和 化 学 都 有 特殊 的 符号 。 如 何在 网 页 上 显示 这 些 特殊 字符 是 本 节 将 要 讲述 的 内 容 。 


在 HIML 中 ， 特 殊 字符 以 


“&” 开 头 ， 以 “; ”结尾 ， 中 间 为 相关 字符 编码 。 例 如 ， 大 括 


号 和 小 括号 被 用 于 声明 标记 ， 因 此 如 果 在 HIML 代码 中 出 现 “<” 和 “>” 符 号 ， 就 不 能 直接 


输入 了 ， 需 要 当 作 特 殊 字符 处 理 


在 HTML 中 ,用 “&lt; ”代表 符号 “<”， 用 “&gt ” 代 


表 符 号 “>”。 例 如 ， 输 入 公式 "a>b"， 在 HTML 中 需要 表示 为 “a&gtb”。 
HTML 中 还 有 大 量 这 样 的 字符 ， 例 如 空格 、 版 权 等 ， 常 用 特殊 字符 如 表 2-1 所 示 。 


表 2-1 常用 特殊 字符 


HTML 编码 
Re 
en 
nbsp; 
elt 
et 
Samp: 
auot 
版 权 Rcopy; 
ree; 
商标 (美国 ) CH#8482; 
Res 
除 号 &divide:; 


在 编辑 化 学 公式 或 物理 公式 时 ,使 用 特殊 字符 的 频 度 非常 高 。 如 果 每 次 输入 时 都 去 查询 或 


者 要 记忆 这 些 特 殊 特写 的 编码 ， 


工作 量 是 相当 大 的 ， 在 此 为 读者 提供 以 下 技巧 : 


(1) 在 Dreamweaver CC 的 设计 视图 下 输入 字符 ,如 输入 a>b 这 样 的 表达 式 , 可 以 直接 输 
入 。 对 于 部 分 键盘 上 没有 的 字符 可 以 借助 “中 文 输入 法 ”的 软 键盘 。 在 中 文 输入 法 的 软 键盘 上 
单 击 鼠 标 右 键 ， 弹 出 特殊 类 别 项 (如 图 2-2 所 示 ) ， 选 择 所 需 类 型 ， 如 选择 “数学 符号 ”， 弹 
出 数学 相关 符号 (如 图 2-3 所 示 ) ， 单 击 相应 按钮 即 可 输入 。 
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“了 PC 键盘 |， 标点 符号 
希腊 字母 数字 序号 
使 文字 重 。 | 数学 符号 
注音 符号 单位 符号 
拼音 制 雪 符 
日 文平 假名 。 | 特殊 符号 
日 文 片 假名 
出 | 极品 王 笔 |3|:E 
图 2-2 特殊 符号 分 类 图 2-3 数学 符号 


(2) 文字 与 文字 之 间 的 空格 如 果 超 过 一 个 ， 那 么 从 第 2 个 空格 开始 都 会 被 忽略 掉 。 快 捷 
地 输入 空格 的 方法 如 下 : 将 输入 法 切换 成 “中 文 输入 法 ”， 并 置 于 “全 角 ” 〈Shift+ 空 格 ) 状 
态 ， 直 接 击 键盘 上 的 空格 键 即 可 。 

(3) 对 于 上 述 两 种 方法 都 无 法 实现 的 字符 ， 可 以 使 用 Dreamweaver CC 的 【插入 】 菜 单 实 
现 。 选 择 【 插 入 】>HTML>【 特 殊 字符 】 菜 单 命 令 ， 在 所 需要 的 字符 中 选择 ， 如 果 没 有 所 需 
要 的 字符 ， 就 选择 【其 他 字符 】 选 项 。 


尽量 不 要 使 用 多 个 “&nbsp” 来 表示 多 个 空格 ， 因 为 多 数 浏览 器 对 空格 的 距离 的 实 
| 珊 是 不 一 样 的 . 


2.1.3 文本 特殊 样式 
在 文档 中 经 常会 出 现 重要 文本 〈 加 粗 显示 ) 、 倾 斜 文本 、 上 标 和 下 标 文本 等 。 


1. 重要 文本 
重要 文本 通常 以 粗 体 显示 、 强 调 方式 显示 或 加 强调 方式 显示 。HTML 中 的 <b> 标 记 、<em> 
标记 和 <strong> 标 记分 别 用 来 实现 这 三 种 显示 方式 。 


【 例 2.1】〔 实 例文 件 ， ch02\2.1.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 无 标题 文档 </title> 

</head> 

<body> 

<!--<b> 标 记 、<em> 标 记 和 <strong> 标 记 --> 
<p><b> 我 是 粗 体 文字 </b> </p> 
<p><em> 我 是 强调 文字 </em> </p> 
<p><strong> 我 是 加 强调 文字 </strong></p> 
</body> 

</html> 
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在 正 11.0 中 预览 ， 效 果 如 图 2-4 所 示 ， 实 现 了 文本 的 三 种 显示 方式 。 


ed 口 x 

站 ”DA 本 书 源 代 码 \code 诺 图。” 搜索 .… 
扰 无 标题 文档 x 回 
文件 (P) 编辑 (E) 查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 
竟 各 百度 一 下 , 你 宫 知 道 
我 是 粗 体 文字 
物 赴 器 兆 交 字 
我 是 加 强调 文字 


图 2-4 重要 文本 预览 效果 


2. 倾斜 文本 
HTML 中 的 <i> 标 记 实 现 了 文本 的 倾斜 显示 。 放 在 <i></i 之 间 的 文本 将 以 斜体 显示 。 


【 例 2.2】“〈 实 例文 件 : ch02\2.2.html) 
<!DOCTYPE html> 

<html> 

<head> 
<title> 无 标题 文档 </title> 
</head> 

<body> 

<i> 我 将 会 以 斜体 字 显示 </i> 

</body> 

</html> 


在 正 11.0 中 预览 效果 如 图 2-5 所 示 ， 其 中 文字 以 斜体 显示 。 


- Oo x 
全 关 DA 本 书 源 代码 Ycodej 图 ~ 上 
局 无 标题 文档 x 


文件 (F) 编辑 (日 查看 (V) 收藏 夫 (A) 工具 (T) ” 
请 全 百度 下， 你 Si 知道 


乱 将 会 以 阁 拟 完 电 大 


图 2-5 倾斜 文本 预览 效果 


。 引 HTML 申 的 重要 文本 和 倾斜 文本 标记 已 经 过 时 ， 是 需要 读者 忘记 的 标记 ， 这 些 标记 都 
应 该 使 用 CSS 样式 来 实现 。 随 着 后 面 学 习 的 深入 ， 读 者 会 逐渐 发 现 ， 即 使 HTML 和 
CSS 实现 相同 的 效果 ， 但 是 CSS 所 能 实现 的 控制 远 远 比 HTML 要 细致、 精确 得 多 。 
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3. 上 标 和 下 标 文 本 
在 HTML 中 用 <sup> 标 记 实 现 上 标 文字 ， 用 <sub> 标 记 实 现下 标 文字 。<sup> 和 <sub> 都 是 
双 标 记 ， 放 在 开始 标记 和 结束 标记 之 间 的 文本 会 分 别 以 上 标 或 下 标 形式 出 现 。 


【 例 2.3】 实例 文件 : ch02\2.3.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 无 标题 文档 </title> 

</head> 

<body> 
<!-- 上 标 显示 --> 
<p>c=a<sup>2</sup>+b<sup>2</sup></p> 

<!-- 下 标 显示 --> 
<p>H<sub>2</sub>+0H<sub>2</sub>0</p> 

</body> 

</html> 


在 正 11.0 中 预览 ， 效 果 如 图 2-6 所 示 ， 分 别 实现 了 上 标 和 下 标 文本 显示 。 


去 口 x 
创 ”D:\ 本 书 源 代码 Ycode 泊 图 ~ 上 
各 无 标题 文档 “加 


文件 (F) 编辑 (E) 查看 (V) 收藏 夫 (A) 工具 (T) ” 
坪 当 百 度 一 下 ， 你 就 知道 


C=a +b“ 


Ho+0 一 Hz0 


图 2-6 上 标 和 下 标 预 览 效果 


2.2 文本 排版 
在 网 页 中 如 果 要 把 文字 都 合理 地 显示 出 来 ， 离 不 开 段 落 标 记 的 使 用 。 对 网 页 中 文字 段落 进 
行 排版 ， 并 不 像 文本 编辑 软件 Word 那样 可 以 定义 许多 模式 来 安排 文字 的 位 置 。 在 网 页 中 要 让 
某 一 段 文字 放 在 特定 的 地 方 是 通过 HIML 标记 来 完成 的 。 
2.2.1 换行 标记 <br> 与 段落 标记 <p> 


浏览 器 在 显示 网 页 时 , 完全 按照 HTML 标记 来 解释 HIML 代码 , 忽略 多 余 的 空格 和 换行 。 
在 HIML 文件 里 ， 不 管 输入 多 少 空格 〈 按 空格 键 》 都 将 被 视 为 一 个 空格 ; 换行 〈 按 Enter 键 ) 


| 
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也 是 无 效 的 。 在 HTML 中 ， 换 行使 用 <br> 标 记 ， 换 段 使 用 <p> 标 记 。 

1. 换行 标记 <br/> 

换行 标记 <br> 是 一 个 单 标记 ， 没 有 结束 标记 ， 是 英文 单词 break 的 缩写 ， 作 用 是 将 文字 在 一 
个 段 内 强制 换行 。 一 个 <br> 标 记 代 表 一 个 换行 ， 连 续 的 多 个 标记 可 以 实现 多 次 换行 。 使 用 换行 标 
记 时 ， 在 需要 换行 的 位 置 添 加 <br> 标 记 即 可 。 例 如 ， 下 面 的 代码 实现 了 对 文本 的 强制 换行 。 


【 例 2.4】 (实例 文件 :ch02\2.4.html) 

<!DOCTYPE html> 

<html> 

<head> 

<title> 文 本 段 换行 </title> 

</head> 

<body> 

本 节目 标 <br/> 网 页 中 的 文字 是 如 何 设置 的 <pr/> 如 何在 Dreamweaver 中 处 理 文字 <br/> 如 何 对 
文本 进行 格式 化 (css) <br/> 熟 悉 使 用 Dreamweaver 进 行 样式 表 的 创建 与 应 用 

</body> 

</html> 


虽然 在 HTML 源 代码 中 ， 主 体 部 分 的 内 容 在 排版 上 没有 换行 ， 但 是 增加 <br> 标 记 后 ， 在 
IE 11.0 中 的 预览 效果 如 图 2-7 所 示 ， 实 现 了 换行 效果 。 


es 口 x 
@ 着 ”DD:\ 本 书 源 代码 \code 庄 图 ”搜索 .… 
二 文本 段 换行 x 回 
文件 (F) 编辑 (6 查看 (V) 收藏 赤 (A) 工具 (T) 帮助 (H) 
请 全 百 度 一 下 ， 你 就 知道 
本 节目 标 
网 页 中 的 文字 是 如 何 设置 的 
如 何在 Dreamweaver 中 处 理 文字 


如 何 对 文本 进行 格式 化 《CSS) 
熟悉 使 用 Dreamweaver 进 行 样式 表 的 创建 与 应 用 


图 2-7 换行 标记 的 使 用 


2. 段落 标记 <p> 

段落 标记 是 双 标记 , 即 <p></p>, 在 <p> 开 始 标记 和 </p> 结 束 标记 之 间 的 内 容 形成 一 个 段落 。 
如 果 省 略 结束 标记 ， 从 <p> 标 记 开始 ， 直 到 下 一 个 段落 标记 之 前 的 文本 都 在 一 段 段落 内 。 段 落 
标记 中 的 p 是 英文 单词 paragraph (段落 ) 的 首 字母 ， 用 来 定义 网 页 中 的 一 段 文本 ， 文 本 在 一 个 
段落 中 会 自动 换行 。 

【 例 2.5】 《实例 文件 : ch02\2.5html) 


<!DOCTYPE html> 


HTML5 网 页 中 的 文本 和 图 像 第 2 章 


<html> 

<head> 

<title> 段 落 标 记 的 使 用 </title> 

</head> 

<body> 

<p>HTML5、CSS3 应 用 教程 之 跟 DIV 说 Bey!Bey!</p> 

<p>Web 设 计 师 可 以 使 用 HTML4 和 css2 .1 完成 一 些 很 酷 的 东西 。 我 们 可 以 在 不 使 用 陈旧 的 基于 &1t; 
table &gt; 布 局 的 基础 上 完成 文档 逻辑 结构 并 创建 内 容 丰 富 的 网 站 。 我 们 可 以 在 不 使 用 内 联 g1t; font 
&gt; 和 &1t7 br &gt; 标 记 的 基础 上 对 网 站 添加 漂亮 而 细腻 的 风格 样式 。 事 实 上 ， 我 们 目前 的 设计 能 力 
已 经 让 我 们 远离 了 那个 可 怕 的 浏览 器 战争 时 代 、 专 有 协议 和 那些 充满 内 动 、 滚 动 和 闪烁 的 丑陋 网 页 。 

<P> 

<p> 

虽然 我 们 现在 已 经 普遍 使 用 了 HTML4 和 css2 .1， 但 是 我 们 还 可 以 做 得 更 好 ! 我 们 可 以 重组 我 们 代 
码 的 结构 并 能 让 我 们 的 页 面 代码 更 富有 语义 化 特性 。 我 们 可 以 缩减 带 给 页 面 美丽 外 观 样式 代码 量 并 让 他 
们 有 更 高 的 可 扩展 性 。 现 在 ，HTML5 和 css3 正 跃跃欲试 地 等 待 大 家 ， 下 面 让 我 们 来 看 看 它们 是 否 真 的 能 
让 我 们 的 设计 提升 到 下 一 个 高 度 吧 … 

</p> 


<p> 

曾经 ， 设 计 师 们 经 常会 频繁 使 用 基于 glt; table &gt; 的 没有 任何 语义 的 布局 。 不 过 最 终 还 是 要 
感谢 像 Jeffrey Zeldman 和 Eric Meyer 这 样 的 思想 革新 者 ， 聪 明 的 设计 师 们 慢 慢 地 接受 了 相对 更 语 
义 化 的 elt; div &gt; 布 局 替代 了 &lt; table &gt; 布 局 ， 并 且 开 始 调用 外 部 样式 表 。 不 幸 的 是 ， 复 
杂 的 网 页 设计 需要 大 量 不 同 的 标记 结构 代码 。 

</p> 

</body> 

</html> 


在 正 11.0 中 的 预览 效果 如 图 2-8 所 示 ，<p> 标 记 将 文本 分 成 了 4 个 段落 。 


@ 忆 SE | 提示 也- © 
三 “ 段 芝 标记 的 使 用 

文人 (明生 再 看 (W) 改 厅 天 (A) 工具 (帮助 (H) 

将 全 百 可 -下 ,4FB0 熙 


|BmML5、css3 应 用 教程 之 跟 DIV 说 Bey !Bey! 


虽然 我们 岗 现 ee E 
的 结构 并 能 而 代码 更 高 有 语 我 人 
并 NT eet 


曾经 ， 设 计 师 们 
Zeldaan 和 Eric 


a 让 
局 普 代 了 < table > 布局 , 和 


标记 结构 代码 


图 2-8 段落 标记 的 使 用 


2.2.2 ”标题 标记 <h1> 一 <h6> 
在 HIML 文档 中 ， 文 本 的 结构 除了 以 行 和 段 出 现 之 外 ， 还 可 以 作为 标题 存在 。 通 常 一 篇 


.21 。 
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文档 最 基本 的 结构 就 是 由 若干 不 同 级 别 的 标题 和 正文 组 成 的 。 

HTML 文档 中 包含 有 各 种 级 别 的 标题 ， 各 种 级 别 的 标题 由 <h1> 到 <h6> 元 素来 定义 ，<h1> 
至 <h6> 标 题 标 记 中 的 字母 h 是 英文 headline (标题 行 ) 的 简称 。 其 中 ，<h1> 代 表 1 级 标题 ， 级 
别 最 高 ， 文 字 也 最 大 ， 其 他 标题 元 素 依次 递减 ，<h6> 级 别 最 低 。 


【 例 2.6】 《实例 文件 : ch02\2.6.html) 
<!DOCTYPE html> 

<html> 

<head> 
<title> 文 本 段 换 行 </title> 
</head> 

<body> 

<h1> 这 里 是 1 级 标题 </h1> 
<h2> 这 里 是 2 级 标题 </h2> 
<h3> 这 里 是 3 级 标题 </h3> 
<h4> 这 里 是 4 级 标题 </h4> 
<h5> 这 里 是 5 级 标题 </h5> 
<h6> 这 里 是 6 级 标题 </h6> 
</body> 

</html> 


在 正 11.0 中 的 预览 效果 如 图 2-9 所 示 。 


口 
x 


名 “DA 本 书 厌 fiB\code\i 国 忆 | 搜索 -- ps 
sa 文本 自视 行 “四 

文件 (F) 忽而 昌 查看 (V) 收藏 赤 (A) 工具 (7) 帮助 (H) 

底下 , 处 0 囊 


这 里 是 1 级 标题 
这 里 是 2 级 标题 


这 里 是 3 级 标题 
这 里 是 4 级 标题 


这 蛙 是 < 级 标 秆 


这 里 呈 6 短 祭 时 


图 2-9 标题 标记 的 使 用 


- 兴 _ 作为 标题 ， 它 们 的 重要 性 是 有 区 别 的 ， 其 中 <h1> 标 题 的 重要 性 最 高 、<h6> 的 最 低 。 


2.3 文字 列表 
文字 列表 可 以 有 序 地 编排 一 些 信息 资源 , 使 其 结构 化 和 条 理化 , 并 以 列表 的 样式 显示 出 来 ， 


HTML5 网 页 中 的 文本 和 图 像 第 2 章 


以 便 浏览 者 能 更 加 快捷 地 获得 相应 信息 。HTML 中 的 文字 列表 如 同文 字 编辑 软件 Word 中 的 项 
目 符号 和 自动 编号 。 


2.3.1 建立 无 序列 表 <ul> 


无 序列 表 相当 于 Word 中 由 项 目 符号 引导 的 选项 ， 项 目 排列 没有 顺序 ， 只 以 符号 作为 分 项 
标识 。 无 序列 表 使 用 一 对 标记 <ul></ul>， 其 中 每 一 个 列表 项 使 用 <li></i> 标 记 ， 其 结构 如 下 所 


示 : 


<ul> 
<1i> 无 序列 表 项 </1i> 
<1i> 无 序列 表 项 </1i> 
<1i> 无 序列 表 项 </1i> 
<1i> 无 序列 表 项 </1i> 
</ul> 


在 无 序列 表 结构 中 ， 使 用 <ul></ul> 标 记 表 示 这 一 个 无 序列 表 的 开始 和 结束 ，<li> 则 表示 一 
个 列表 项 的 开始 。 在 一 个 无 序列 表 中 可 以 包含 多 个 列表 项 ， 并 且 <li> 可 以 省 略 结束 标记 。 下 面 
的 实例 使 用 无 序列 表 实 现 文本 的 排列 显示 。 


【 例 2.7】 《实例 文件 :ch02\2.7.html) 


<!DOCTYPE html> 
<html> 

<head> 
<title> 惰 套 无 序列 表 的 使 用 </title> 
</head> 


<body> 
<hl> 网 站 建设 流程 </h1> 
<ul> 
<1i> 项 目 需 求 </1i> 
<1i> 系统 分 析 
<ul> 
<1i> 网 站 的 定位 </1i> 
<1i> 内 容 收集 </1i> 
<1i> 栏 目 规划 </1i> 
<1i> 网 站 目录 结构 设计 </1i> 
<1i> 网 站 标志 设计 </1i> 
<1i> 网 站 风格 设计 </1i> 
<1i> 网 站 导航 系统 设计 </1i> 
</ul> 
</1i> 
<1i> 伪 网 页 草图 


<ul> 
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<1i> 制作 网 页 草图 </1i> 
<1i> 将 草图 转换 为 网 页 </1i> 
</ul> 
</1i> 
<1i> 站 点 建设 </1i> 
<1i> 网 页 布局 </1i> 
<1i> 网 站 测试 </1i> 
<1i> 站 点 的 发 布 与 站 点 管理 </1i> 
</ul> 
</body> 
</html> 


在 正 11.0 中 的 预览 效果 如 图 2-10 所 示 。 读 者 会 发 现 ， 在 无 序列 表 项 中 可 以 幅 套 列表 。 例 
如 ，“ 系 统 分析 ” 列 表 项 和 “ 伪 网 页 草图 ”列表 项 中 都 有 下 级 列表 ， 因 为 在 这 对 <li></li> 标 记 
间 又 增加 了 一 对 <ul></ul> 标 记 。 


| 各 DA 不 书 源 (C 码 \codeW 图 ”已 | 搜索 PA- 
| 日 溢 守 无 序列 未 的 便 用 x 园 

文件 (F) 韦 码 (外 查看 (V) 收藏 天 (A) 工具 (T) 帮助 (H) 

高 间 百 放下 ,四 W310 到 


网 站 建设 流程 


,项 


需求 


。 网 站 导 

， 伪 网 页 草图 

= 制作 网 页 草图 

。 将 草图 转换 为 网 页 
， 站 点 建设 


图 2-10 无 序列 表 


2.3.2 ”建立 有 序列 表 <ol> 


有 序列 表 类 似 于 Word 中 的 自动 编号 功能 。 有 序列 表 的 使 用 方法 和 无 序列 表 的 使 用 方法 基 
本 相同 ， 它 使 用 标记 <ol></ol>， 每 一 个 列表 项 使 用 <li></li>。 每 个 项 目 都 有 前 后 顺序 之 分 ， 通 
常用 数字 表示 ， 其 结构 如 下 : 
<ol> 
<1i> 第 1 项 </1i> 


<1i> 第 2 项 </1i> 
<1i> 第 3 项 </1i> 
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</o1> 


下 面 的 实例 使 用 有 序列 表 实现 文本 的 排列 显示 。 


【 例 2.8】〔 实 例文 件 ，ch022.8.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 有 序列 表 的 使 用 </title> 

</head> 

<body> 

<h1> 本 讲 目标 </h1> 

<ol> 
<1i> 网 页 的 相关 概念 </1i> 
<1i> 网 页 与 HTML</1i> 
<1i> Web 标 准 ( 结 构 、 表 现 、 行 为 ) </1i> 
<1i> 网 页 设计 与 开发 的 过 程 </1i> 
<1i> 与 设计 相关 的 技术 因素 </1i> 
<1i> HTML 简 介 </1i> 

</o1> 

</body> 

</html> 


在 正 11.0 中 的 预览 效果 如 图 2-11 所 示 。 读 者 可 以 从 中 看 到 新 添加 的 有 序列 表 。 


- 0O x 
加 D:\ 相 忆 杜 代码 \codeW 图 ”C0 | | 妆 雪 - 

克 有 序列 到 的 合用 x 加 

文件 (F] 编 疆 (E) 查看 (V) 收藏 天 (A] 工具 (D) 入 助 (H) 

请 各 二 下, (rn 下 


本 讲 目 标 


1。 网 页 的 相关 在 多 
2， 网 页 与 HTML 
3，Web 标 
和 4 网 页 设计 与 开发 节 
5.， 与 设计 相关 的 技 
6，HTML 简 介 


图 2-11 有 序列 表 的 效果 


2.4 网 页 中 的 图 像 <img> 


俗话 说 “一 图 胜 千言 ”， 图 片 是 网 页 中 不 可 缺少 的 元 素 ， 巧 妙 地 在 网 页 中 使 用 图 片 可 以 为 
网 页 增色 不 少 。 网 页 支持 多 种 图 片 格式 ， 并 且 可 以 对 插入 的 图 片 设置 宽度 和 高 度 。 
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2.4.1 网 页 中 支持 的 图 片 格式 


图 片 在 网 页 中 具有 画龙点睛 的 作用 ， 既 能 装饰 网 页 又 能 表达 个 人 的 情调 和 风格 。 但 在 网 页 
上 加 入 的 图 片 不 宜 过 多 ， 和 否则 浏览 的 速度 就 会 受到 影响 ， 导 致 用 户 失去 耐心 而 离开 页 面 。 网 页 
中 使 用 的 可 以 是 GIF、JPEG、BMP、TIFF、PNG 等 格式 的 图 片 文件 ， 其 中 使 用 广泛 的 主要 是 
GIF 和 JPEG 两 种 格式 。 

GIF 格式 是 由 Compuserve 公司 提出 的 与 设备 无 关 的 图 像 存储 标准 ,也 是 Web 上 使 用 最 早 、 
应 用 最 广泛 的 图 像 格式 .GIF 是 通过 减少 组 成 图 像 每 个 像素 的 储存 位 数 和 LZH 压缩 存储 技术 来 
降低 图 像 文件 大 小 的 。GIF 格式 最 多 只 能 是 256 色 的 图 像 。GIF 图 像 文件 短小 、 下 载 速 度 快 、 
低 颜色 数 下 比 JPEG 装载 速度 更 快 ， 并 且 可 用 许多 具有 同样 大 小 的 图 像 文件 组 成 动画 。 在 GIF 
图 像 中 可 指定 透明 区 域 ， 使 图 像 具 有 非 同一 般 的 显示 效果 。 

JPEG 格式 是 在 目前 Intemet 中 最 受 欢 迎 的 图 像 格式 ， 可 支持 多 达 16M 种 颜色 ， 它 能 展现 
十 分 丰富 生动 的 图 像 ， 还 能 压缩 。 但 压缩 方式 是 以 损失 图 像 质量 为 代价 的 ， 压 缩 比 越 高 ， 图 像 
质量 损失 越 大 ， 图 像 文 件 也 就 越 小 。 一 般 情 况 下 ，Windows 支持 的 BMP 格式 图 像 大 小 是 JPEG 
格式 的 5 至 10 倍 ,而 GIF 格式 最 多 只 能 是 256 色 ， 因 此 可 以 载 入 256 色 以 上 图 像 的 了 PEG 格 
式 成 了 Intemet 中 最 受 欢迎 的 图 像 格式 。 

当 网 页 中 需要 载 入 一 个 较 大 的 GIF 或 PEG 图 像 文件 时 ， 装 载 速度 会 很 慢 。 为 改善 网 页 的 
视觉 效果 ， 可 在 载 入 时 设置 为 隔行 扫描 。 隔 行 扫描 在 显示 图 像 开 始 看 起 来 非常 模糊 ， 接 着 细节 
逐渐 添加 上 去 直到 图 像 完 全 显示 出 来 。 

GIF 是 支持 透明 、 动 画 的 图 片 格式 ， 但 色彩 只 有 256 色 。JPEG 是 一 种 不 支持 透明 和 动画 
的 图 片 格式 ， 但 是 色彩 模式 比较 丰富 ， 保 留 大 约 1670 万 种 颜色 。 


网 页 中 现在 也 有 很 多 PNG 格式 的 图 片 。PNG 图 片 具有 不 失真 、 兼 有 GIF 和 JPEG 
ETEE 的 色彩 模式 、 网 络 传输 速度 快 支 持 迁 明 图 像 的 制作 特点 ， 近 年 来 在 网 络 中 也 很 流 
行 。 


2.4.2 ”使 用 路 径 


HIML 文档 支持 文字 、 图 片 、 声 音 、 视 频 等 媒体 格式 ， 但 是 在 这 些 格式 中 ， 除 了 文本 是 写 
在 HIML 中 的 ， 其 他 都 是 嵌入 式 的 ，HIML 文档 只 记录 了 这 些 文件 的 路 径 。 这 些 媒体 信息 能 
否 正确 显示 ， 路 径 至 关 重 要 。 

路 径 的 作用 是 定位 一 个 文件 的 位 置 。 文 件 的 路 径 可 以 有 两 种 表述 方法 : 以 当前 文档 为 参照 
物 表示 文件 的 位 置 ， 即 相对 路 径 ， 以 根 目录 为 参照 物 表 示 文 件 的 位 置 ， 即 绝对 路 径 。 

为 了 方便 讲述 绝对 路 径 和 相对 路 径 ， 现 有 目录 结构 如 图 2-12 所 示 。 
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E 盘 
ge 
ee 
图 2-12 目录 结构 
1. 绝对 路 径 


例如 ,在 E 盘 的 webs 目录 下 的 images 下 有 一 个 tpjpg 图 像 ， 那 么 它 的 路 径 就 是 
E:vwebs\images\tpjpg, 像 这 种 完整 地 描述 文件 位 置 的 路 径 就 是 绝对 路 径 。 如 果 将 图 片 文件 pjpg 
插入 到 网 页 index.html， 绝 对 路 径 表 示 方 式 如 下 : 


E:\webs\images\tp.jpg 


如 果 使 用 了 绝对 路 径 E:\webs\images\tp.jpg 进行 图 片 链接 , 那么 在 本 地 电脑 中 将 一 切 正常 ， 
因为 在 E:vwebs\images 下 的 确 存 在 ppjpg 这 个 图 片 。 如 果 将 文档 上 传 到 网 站 服务 器 上 后 就 不 会 
正常 了 ， 因 为 服务 器 给 你 划分 的 存放 空间 可 能 在 E 盘 其 他 目录 中 ， 也 可 能 在 D 盘 其 他 目录 中 。 
为 了 保证 图 片 正常 显示 ， 必 须 从 webs 文件 夹 开始 ， 放 到 服务 器 或 其 他 电脑 的 E 盘 根 目录 下 。 

通过 上 述 讲解 读者 会 发 现 ， 当 链接 本 站 点 内 的 资源 时 ， 使 用 绝对 路 径 对 位 置 要 求 非常 严格 。 
因此 ， 链 接 本 站 内 的 资源 不 建议 采用 绝对 路 径 。 如 果 链 接 其 他 站 点 的 资源 ， 就 必须 使 用 绝对 路 径 。 

2. 相对 路 径 

如 何 使 用 相对 路 径 设 置 上 述 图 片 呢 ? 所 谓 相 对 路 径 ， 顾 名 思 义 就 是 以 当前 位 置 为 参考 点 ， 
自己 相对 于 目标 的 位 置 。 例 如 ， 在 index.html 中 连接 tpjpg 就 可 以 使 用 相对 路 径 。index.html 
和 tp.jpg 图 片 的 路 径 根据 上 述 目 录 结 构图 可 以 这 样 来 定位 。 从 index.html 位 置 出 发 , 它 和 images 
属于 同 级 ， 路 径 是 通 的 ， 因 此 可 以 定位 到 images，images 的 下 级 就 是 tpjpg。 使 用 相对 路 径 表 
示 图 片 如 下 : 


images/tp.jpg 


使 用 相对 路 径 ， 不 论 将 这 些 文件 放 到 哪里 ， 只 要 tpjpg 和 index.html 文件 的 相对 关系 没有 
变 ， 就 不 会 出 错 。 
在 相对 路 径 中 ，“..” 表 示 上 一 级 目录 ，“../.” 表 示 上 级 的 上 级 目录 ， 以 此 类 推 。 例 如 ， 
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将 ppjpg 图 片 插入 ahtml 文件 中 ， 使 用 相对 路 径 表示 如 下 


../images/tp.jpg 


cs 
技 


细心 的 读者 会 发 现 ， 路 径 分 隔 符 使 用 了 “” 和 “/” 两 种 ， 其 中 “\” 表示 林地 分 隔 
_ | 符 ，“/” 表示 网 络 分 隔 符 。 因 为 网 站 制作 好 肯定 是 在 网 络 上 运行 的 ， 所 以 要 求 使 
9 二 用 “/” 作 为 路 径 分 隔 符 。 


有 的 读者 可 能 会 有 这 样 的 疑惑 : 一 个 网 站 有 许多 链接 ， 怎 么 能 保证 它们 的 连接 都 正确 ， 如 
果 调 整 了 一 下 图 片 或 网 页 的 存储 路 径 ， 那 不 是 全 乱 了 吗 ? 如 何 提高 工作 效率 呢 ? 


Dreamweaver 工具 的 站 点 管理 功能 ， 不 但 可 以 将 绝对 路 径 自 动 地 转化 为 相对 路 径 ， 
ESE Ha 并 且 当 在 站 点 中 改动 文件 路 径 时 ， 与 这 些 文件 关联 的 连接 路 径 都 会 自动 更 改 。 


2.4.3 ”网 页 中 插入 图 像 标记 <img> 
图 像 可 以 美化 网 页 ， 插 入 图 像 使 用 单 标记 <img>。<img> 标 记 的 属性 及 描述 如 表 2-2 所 示 。 


属性 
alt 

title 

STc 
ismap 
usemap 


vspace 


width 


pixels 


pixels % 


描述 

定义 有 关 
定义 鼠标 
要 显示 的 
把 图 像 定 
把 图 像 定 
定义 图 像 
设置 图 像 


1. 图 像 的 源 文件 src 
src 属性 用 于 指定 图 片 源 文件 的 路 径 ， 是 <img> 标 记 必 不 可 少 的 属性 。 语 法 格式 如 下 


<img src=" 图 片 路 径 "> 


表 2-2 <img> 标记 的 属性 及 描述 


图 像 未 加 载 完成 时 的 提示 

放置 在 图 像 上 的 文本 提示 

图 像 的 URL 

义 为 服务 器 端的 图 像 映射 

义 为 客户 端的 图 像 映射 。 请 参阅 <map> 和 <area> 标 记 ， 了 解 其 工作 原理 
顶部 和 底部 的 空白 。 不 推荐 使 用 ， 请 使 用 CSS 代替 

的 宽度 


图 片 的 路 径 可 以 是 绝对 路 径 ， 也 可 以 是 相对 路 径 。 下 面 的 实例 是 在 网 页 中 插入 图 片 。 


【 例 2.9】 实例 文件 : ch02\2.9.html) 


<!DOCTYPE html> 
<html> 
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<head> 

<title> 插 入 图 片 </title> 
</head> 

<body> 

<img src="images/meishi.jpg"> 
</body> 

</html> 


在 正 11.0 中 的 预览 效果 如 图 2-13 所 示 。 


可 DAEHRREeodeE 国 - 口 | 且 
EC 

pH) Wi) EV) RA I WH) 
育 9m 下, sie 


图 2-13 插入 图 片 


2. 设置 图 像 的 宽度 width 和 高 度 height 
在 HTML 文档 中 ， 还 可 以 设置 插入 图 片 的 显示 大 小 ， 一 般 是 按 原 始 尺寸 显示 ， 但 也 可 以 
任意 设置 显示 尺寸 。 设 置 图 像 尺寸 分 别 用 属性 width (宽度) 和 height (高 度 )。 


【 例 2.10】 实例 文件 ，ch022.10.html) 

<!DOCTYPE html> 

<html> 

<head> 

<title> 插 入 图 片 </title> 

</head> 

<body> 

<! 一 原始 图 像 、 设 置 宽 度 为 200 和 设置 宽度 为 200、 高 度 为 300--> 
<img src="images/meishi.jpg"> 

<img src="images/meishi.jpg" width="200"> 

<img src="images/meishi.jpg" width="200" height="300"> 
</body> 

</html 


在 正 11.0 中 预览 效果 ， 如 图 2-14 所 示 。 
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图 2-14 设置 图 片 的 宽度 和 高 度 


从 中 可 以 看 到 ， 图 片 的 显示 尺寸 是 由 width 宽度 ) 和 height (高度) 控制 的 。 当 只 为 图 
片 设置 一 个 尺寸 属性 时 ， 另 外 一 个 尺寸 就 以 图 片 原始 的 长 宽 比 例 来 显示 。 图 片 的 尺寸 单位 可 以 
选择 百分比 或 数值 。 百 分 比 为 相对 尺寸 ， 数 值 是 绝对 尺寸 。 


因为 网 页 中 插入 的 图 像 都 是 位 图 ， 放 大 尺寸 ， 图 像 会 出 现 马赛 克 ， 变 得 模糊 。 

sa 在 Windows 中 查看 图 片 的 尺寸 ， 只 需要 找到 图 像 文件 ， 把 鼠标 指针 移动 到 图 像 上 ， 
停留 几 秒 后 ,就 会 出 现 一 个 提示 框 ， 说明 图 像 文件 的 尺寸 。 尺寸 后 显示 的 数字 代表 
图 像 的 宽度 和 高 度 ， 如 256 x 256。 


3. 设置 图 像 的 提示 文字 alt 

在 浏览 网 页 时 ， 图 像 提 示 文 字 的 作用 有 两 个 : 一 是 如 果 图 像 下 载 完成 ， 将 鼠标 指针 放 在 该 
图 像 上 ， 鼠 标 指针 旁边 会 出 现 提示 文字 ， 二 是 如 果 图 像 没有 成 功 下 载 ， 在 图 像 的 位 置 上 就 会 显 
示 提 示 文 字 。 

随 着 互联 网 技术 的 发 展 ， 网 速 已 经 不 是 制约 因素 ， 因 此 一 般 都 能 成 功 下 载 图 像 。 现 在 ，alt 
还 有 另外 一 个 作用 ， 在 百度 、google 等 大 搜索 引擎 中 ， 搜 索 图 片 不 如 文字 方便 ， 如 果 给 图 片 添 
加 适当 提示 ， 可 以 方便 搜索 引擎 的 检索 。 

下 面 的 实例 将 为 图 片 添 加 提示 文字 效果 。 


【 例 2.11】〔 实 例文 件 ，ch022.11.htnl) 
<!DOCTYPE html> 

<html> 

<head> 

<title> 图 片 文字 提示 </title> 
</head> 

<body> 

<!- 添 加 提示 文字 效果 --> 
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<img src="images/meishi.jpg" alt=" 未 加 载 完成 时 显示 的 蔡 代 文字 "” title=" 鼠 标 放 上 
去 显示 的 文字 "> 

</body> 

</html> 


在 下 11.0 中 的 预览 效果 如 图 2-15 所 示 。 用 户 将 鼠标 放 在 图 片上 ， 即 可 看 到 提示 文字 。 


DrodeY OO || 控 示 - £ 
后 图 H 文 了 必 示 > 
文件 (F) 篇 各 昌 。 查 者 (V) 收 生 天， 工具 (D 帮助 (H) 


请 ER_ 下 , fronE 


图 2-15 ”图片 文字 提示 
注意 : 在 火狐 浏览 器 中 不 支持 该 功能 。 
2.5 综合 实例 一 一 图 文 并 茂 房屋 装饰 装修 网 页 


本 章 讲述 了 网 页 组 成 元 素 中 最 常用 的 文本 和 图 片 。 本 综合 实例 的 目的 是 创建 一 个 由 文本 和 
图 片 构成 的 房屋 装饰 效果 网 页 (如 图 2-16 所 示 ) ， 有 具体 操作 步骤 如 下 : 


国 则 在 Dreamweaver CC 中 新 建 HTML 文档 ， 并 修改 成 HIMLS 标准 ， 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 
<title> 房 屋 装饰 装修 效果 图 </title> 
</head> 

<body> 

</body> 

</html> 


L 辐 在 body 部 分 增加 如 下 HIML 代码 ， 保存 页 面 。 


<p> <img src="images/xiyatu.jpg" width="300" height="200"/><br/> 
西雅图 原生 态 公寓 室内 设计 </p> 

<hr> “<! 一 此 标签 将 显示 为 一 条 水 平 线 。--> 

<p> <img src="images/stadshem.jpg" width="300" height="200"/><br/> 
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stadshem 小 户型 公寓 设计 〈 带 阁楼 ) </p> 

<hr> 

<p> <img src="images/qingxinhuoli.jpg" width="300" height="200"/><br/> 
清新 活力 家 居 </p> 

<hr> 

<p> <img src="images/renwen.jpg" width="300" height="200"/><br/> 

人 文 简约 悠然 家 居 </p> 


<hr> 


图 2-16 房屋 装饰 效果 网 页 


- 兴 _ <hr> 标 记 的 作用 是 定义 内 容 中 的 主题 变化 ， 并 显示 为 一 条 水 平 线 ， 在 HIML5 中 它 
。 没有 任何 属性 。 


另外 ， 快 速 插入 图 片 及 设置 相关 属性 可 以 借助 Dreamweaver CC 的 插入 功能 ， 或 按 下 组 合 
键 Ctrl+AltHI。 


2.6 专家 解 惑 


问题 1 : 换行 标记 和 段落 标记 的 区 别 是 什么 ? 
答 : 换行 标记 是 单 标记 ， 必 须 不 能 写 结束 标记 。 段 落 标 记 是 双 标 记 ， 可 以 省 略 结束 标记 也 
可 以 不 省 略 。 默 认 情况 下 ， 段 落 之 间 的 距离 和 段落 内 部 的 行 间距 是 不 同 的 ， 段 落 间距 比较 大 ， 
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行 间 距 比 较 小 。 HTML 是 无 法 调整 段落 间距 和 行 间距 的 , 如 果 需 要 调整 它们 , 就 必须 使 用 CSS。 
在 Dreamweaver CC 的 设计 视图 下 按 下 回 车 (Enter) 键 可 以 快速 换 段 ， 按 下 Shift+ 回 车 (Enter) 
键 可 以 快速 换行 。 

问题 2 : 无 序列 表 <ul> 标 记 的 作用 是 什么 ? 

答 : 无 序列 表 标 记 主 要 用 于 条 理化 和 结构 化 文本 信息 。 在 实际 开发 中 ,无 序列 表 在 制作 导 
航 菜单 时 使 用 广泛 。 导 航 菜单 的 结构 一 般 都 使 用 无 序列 表 实 现 。 

问题 3 : 在 浏览 器 中 ， 图 片 无 法 显示 。 

答 : 图 片 在 网 页 中 属于 嵌入 对 象 ， 并 不 是 图 片 保存 在 网 页 中 ， 网 页 只 是 保存 了 指向 图 片 的 
路 径 。 浏 览 器 在 解释 HTML 文件 时 ， 会 按 指定 的 路 径 去 寻找 图 片 ， 如 果 在 指定 的 位 置 不 存在 
图 片 ， 就 无 法 正常 显示 。 为 了 保证 图 片 的 正常 显示 ， 制 作 网 页 时 需要 注意 以 下 几 处 。 


(1) 图 片 格式 一 定 是 网 页 支持 的 。 

(2) 图 片 的 路 径 一 定 要 正确 ， 并 且 图 片 文 件 扩展 名 不 能 省 略 。 

(3) HTML 文件 位 置 发 生 改变 时 ， 图 片 一 定 要 跟随 着 改变 ， 即 图 片 位 置 和 HTML 文件 位 
置 始 终 保持 相对 一 致 。 


第 3 章 ”用 HTMLS5 建 立 超 链接 


HTML 文件 中 最 重要 的 应 用 之 一 就 是 超 链 接 。 超 链接 是 一 个 网 站 的 灵魂 。 Web 上 的 网 页 是 
互相 链接 的 ， 单 击 被 称 为 超 链接 的 文本 或 图 形 就 可 以 链接 到 其 他 页 面 。 


3.1 URL 的 概念 


URL 为 “Uniform Resource Locator” 的 缩写 ， 通 常 翻译 为 “统一 资源 定位 器 ”， 也 就 是 人 
们 通常 说 的 “网 址 ”。 它 用 于 指定 Intemet 上 的 资源 位 置 。 


3.1.1 URL 的 格式 


网 络 中 的 计算 机 是 通过 IP 地 址 区 分 的 ， 如 果 需 要 访问 网 络 中 某 台 计算 机 中 的 资源 ， 首 先 
要 定位 到 这 台 计 算 机 。JP 地 址 由 32 位 二 进 制 代码 (32 个 0/1) 组成， 数字 之 间 没 有 意义 ， 且 
不 容易 记忆 。 为 了 方便 记忆 ， 现 在 计算 机 一 般 采 用 域名 的 方式 来 寻 址 ， 即 在 网 络 上 使 用 一 组 有 
意义 字符 组 成 的 地 址 代替 人 P 地 址 来 访问 网 络 资源 。 

URL 由 4 个 部 分 组 成 ， 即 “协议 ”“ 主 机 名 ”“ 文 件 夹 名 ”“ 文 件 名 ”， 如 图 3-1 所 示 。 


http://wm. webDesign. com/pages/computer. html 


协议 主机 名 文件 夹 名 文件 名 


图 3-1 URL 组 成 


互联 网 中 有 各 种 各 样 的 应 用 ， 如 Web 服务 、FTP 服务 等 。 每 种 服务 应 用 都 要 对 应 有 协议 ， 
通常 通过 浏览 器 浏览 网 页 的 协议 都 是 HTTP〈 超 文本 传输 协议 ) ， 因 此 通常 网 页 的 地 址 都 以 
“http:/” 开 头 。 

“www.baidu.com” 为 主机 名 ， 表 示 文 件 存在 于 哪 台 服 务 器 ， 主 机 名 可 以 通过 人 P 地 址 或 
者 域名 来 表示 。 

确定 到 主机 后 ,还 需要 说 明文 件 存在 于 这 台 服 务 器 的 哪个 文件 夹 中 ,这 里 文件 夹 可 以 分 为 
多 个 层级 。 

确定 文件 夹 后 , 就 要 定位 到 文件 , 即 要 显示 哪个 文件 , 网 页 文件 通常 是 以 “.html” 或 “htm” 
为 扩展 名 。 
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3.1.2 URL 的 类 型 


在 第 3 章 讲解 网 页 中 使 用 的 图 像 时 ， 已 经 介绍 了 “路 径 ” 的 概念 。 对 于 超 链接 来 说 ， 路 径 
的 概念 同样 存在 。 
超 链接 的 URL 可 以 分 为 两 种 类 型 : “绝对 URL” 和 “相对 URL”。 


(1) 绝对 URL 一 般 用 于 访问 非 同 一 台 服务 器 上 的 资源 。 

(2) 相对 URL 是 指 访问 同一 台 服 务 器 上 相同 文件 夹 或 不 同文 件 夹 中 的 资源 。 如 果 访 问 相 
同文 件 夹 中 的 文件 ， 只 需要 写 文件 名 ; 如 果 访 问 不 同文 件 夹 中 的 资源 ，URL 以 服务 器 的 根 目录 
为 起 点 ， 指 明文 件 的 相对 关系 ， 由 文件 夹 名 和 文件 名 两 部 分 构成 。 


下 面 的 实例 使 用 绝对 URL 和 相对 URL 实现 超 链接 。 


【 例 3.1】〔 实 例文 件 ，ch03\3.1.html) 

<!DOCTYPE html> 

<html> 

<head> 

<title> 绝 对 URL 和 相对 URL</title> 

</head> 

<body> 

<!-- 使 用 绝对 URL--> 

单 击 <a href="http://www.webDesign.com/index.html"> 绝 对 URL</a> 链 接 到 
webDesign 网 站 首页 <br/> 

<!-- 使 用 相对 URL--> 

单 击 <a href="02 .html"> 相 同文 件 夹 的 URL</a> 链 接 到 相同 文件 夹 中 的 第 2 个 页 面 <br/> 

单 击 <a href="../pages/03.html"> 不 同文 件 夹 的 URL</a> 链 接 到 不 同文 件 夹 中 的 第 3 个 页 面 

</body> 

</html> 


在 上 述 代码 中 ， 第 1 个 链接 使 用 的 是 绝对 URL; 第 2 个 用 的 是 服务 器 相对 URL， 也 就 是 
链接 到 文档 所 在 的 服务 器 的 根 目录 下 的 02.html; 第 3 个 使 用 的 是 文档 相对 URL， 即 原文 档 所 
在 文件 夹 的 父 文件 夹 下 面 的 pages 文件 夹 中 的 03.html 文件 。 

在 正 11.0 中 的 预览 网 页 效果 如 图 3-2 所 示 。 


ER 
鲜 _D:\ 本 书 源 代码 Ycode 迹 图 搜索 -- 

|B HURLONURL x 加 

文件 () 过 入 (E] 去 看 V) 履 营 夫 (A) 工具 乔 助 (H) 

请 名 百度 下, 他 WX 首 

单 击 绝对 URL 链 接 到 webDesign 网 站 首页 

单 击 相 辐 文件 夹 的 URL 链 接 到 相同 文件 夹 中 的 第 2 个 ， 

单 击 不 同文 件 类 的 URIL 链 接 到 不 同文 件 夹 中 的 第 3 个 - 


图 3-2 绝对 URL 和 相同 URL 
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3.2 ” 超 链 接 标 记 <a> 


超 链接 是 指 当 鼠标 单 击 一 些 文字 、 图 片 或 其 他 网 页 元 素 时 ， 浏 览 器 会 根据 其 指示 载 入 一 个 
新 的 页 面 或 跳 转 到 页 面 的 其 他 位 置 。 超 级 链接 除了 可 链接 文本 外 ， 还 可 链接 各 种 多 媒体 ， 如 声 
音 、 图 像 、 动 画 等 ， 通 过 它们 可 享受 丰富 多 彩 的 多 媒体 世界 。 

建立 超 链接 所 使 用 的 HTML 标记 为 <a></a>。 超 链接 最 重要 的 有 两 个 要 素 : 超 链 接 指向 的 
目标 地 址 和 设置 为 超 链接 的 网 页 元 素 。 基 本 的 超 链 接 结构 如 下 : 


<a href=URL> 网 页 元 素 </a> 
3.2.1 设置 文本 和 图 片 的 超 链接 


设置 超 链接 的 网 页 元 素 通 常 使 用 文本 和 图 片 。 文 本 超 链接 和 图 片 超 链接 通过 <a></a> 标 记 
实现 ， 将 文本 或 图 片 放 在 <a> 开 始 标记 和 </a> 结 束 标记 之 间 即 可 建立 超 链接 。 下 面 的 实例 将 实 
现 文 本 和 图 片 的 超 链接 。 


【 例 3.2】〔 实 例文 件 ，ch033.2.html) 
<!DOCTYPE html> 


<html> 

<head> 
<title> 文 本 和 图 片 超 链接 </title> 
</head> 

<body> 


<a href="a.html"><img src="images/0371.gif"></a> 
<a href="b.html"> 公 司 简介 </a> 

</body> 

</html> 


在 正 11.0 中 预览 网 页 效果 ， 如 图 3-3 所 示 。 用 鼠标 单 击 图 片 或 文本 即 可 实现 链接 跳 转 的 
效果 。 


口 x 
© a oases @ - 0 | oemtmeode 
局 文本 和 图 片 起 迪 按 x 加 
文件 (护短 (日 ”查看 (V) 履 意 于 (A) 工具 (D) 帮 动 (H) 
请 EE 下 . ‘enn 


ee 


避 
[fileyyp:/ 本 忆 源 代 碍 /codey 其 代 各 /chO3/a.html 


图 3-3 文本 和 图 片 链接 效果 
默认 情况 下 ， 为 文本 添加 超 链接 ， 文 本 会 自动 增加 下 画 线 ， 并 且 文 本 颜色 变 为 蓝 色 ， 单 击 
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过 的 超 链接 ， 文 本 会 变 成 暗 红 色 。 图 片 增加 超 链 接 以 后 ， 浏 览 器 会 自动 给 图 片 加 一 个 粗 边 框 。 
图 片 和 文本 超 链 接 的 下 画 线 需要 借助 CSS 样式 完成 ， 这 里 不 做 介绍 ， 详 见 CSS 部 分 。 


3.2.2” 超 链接 指向 的 目标 类 型 

通过 上 面 的 讲解 ， 读 者 会 发 现 超 链接 的 目标 对 象 都 是 .html 类 型 的 文件 。 超 链接 不 但 可 以 
链接 到 各 种 类 型 (如 图 片 文件 、 声 音 文件 、 视 频 文件 、word 等 ) 的 文件 ， 还 可 以 链接 到 其 他 网 
站 、ftp 服务 器 、 电 子 邮 件 等 。 

1. 链接 到 各 种 类 型 的 文件 

超 链接 <a> 标 记 的 href 属性 指向 链接 的 目标 (可 以 是 各 种 类 型 的 文件 ) 。 如 果 是 浏览 器 能 
够 识别 的 类 型 ， 会 直接 在 浏览 器 中 显示 ; 如 果 是 浏览 器 不 能 识别 的 类 型 ， 在 正 浏览 器 中 会 弹 
出 文件 下 载 对 话 框 ， 如 图 3-4 所 示 。 


Intemnet Explorer W 
要 对 2.doc 执行 什么 操作 ? 


大 小 10.5 KB 
来 源 - D:\ 太 书 涛 代码 \code\ 涯 代码 \ch03 


> 打开 (O) 
不 自动 保存 文件 


全 保存 (S) 
人 另存 为 (A) 


图 3-4 正中 的 文件 下 载 对 话 框 


【 例 3.3】 实例 文件 ，ch03\3.3.html) 
<!DOCTYPE html> 

<html> 

<head> 

<title> 链 接 各 种 类 型 文件 </title> 

</head> 

<body> 
<p><a href="a.html"> 链 接 html 文 件 </a></p> 
<p><a href="coffe .jpg"> 链 接 图 片 </a></p> 
<p><a href="2.doc"> 链 接 word 文 档 </a></p> 
</body> 

</html> 


在 正 11.0 中 预览 网 页 效果 ， 如 图 3-5 所 示 ， 实 现 链 接 到 HTML 文件、 图片 和 Word 文档 。 
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- OO x 
人 司 ”Dx 机 书 源码 Kode 呈 和 ” 巴 DN 市 世 源 代码 Kodel 
| 等 外 这 和 SB 文件 后 
文件 (F) 罗 误 日 喜 看 W) 收 齐 去 (A) 工具 {TD 帮助 (H) 
户 窜 百 放下 ,你 Wi 
链接 html 文 件 
链接 图 上 


word- 


图 3-5 各 种 类 型 的 链接 


2. 链接 到 其 他 网 站 或 FTP 服务 器 
在 网 页 中 ， 友 情 链接 也 是 推广 网 站 的 一 种 方式 。 下 列 代码 实现 了 链接 到 其 他 网 站 或 FTP 
服务 器 的 功能 。 


<a href="http://www.baidu.com"> 链 接 百度 </a> 
<a href="ftp://172.16.1.254"> 链 接 到 FTP 服 务 器 </a> 


这 里 FTP 服务 器 用 的 是 亿 地 址 。 为 了 保证 代码 的 正确 运行 ， 请 读者 填写 有 效 的 FTP 服务 器 
EE wt. 


3. 设置 电子 邮件 链接 

在 某 些 网 页 中 , 当 访 问 者 单 击 某 个 链接 以 后 , 会 自动 打开 电子 邮件 客户 端 软件 (如 Outlook 
或 Foxmail 等 ) 向 某 个 特定 的 E-mail 地 址 发 送 邮件 ， 这 个 链接 就 是 电子 邮件 链接 。 电 子 邮 件 链 
接 的 格式 如 下 : 


<a href="mailto: 电 子 邮件 地 址 ”> 网 页 元 素 </a> 


【 例 3.4】 〈 实 例文 件 ，ch03\3.4.html) 

<!DOCTYPE html> 

<html> 

<head> 

<title> 电 子 邮件 链接 </title> 

</head> 

<body> 

<img src="images/1ogo.gif" width="119" height="49"> [免费 注册 ] [登录 ] 
<a href="mailto:kfdzsj@126.com"> 站 长 信箱 </a> 
</body> 

</html> 


在 正 11.0 中 预览 网 页 效果 ， 如 图 3-6 所 示 ， 实 现 了 电子 邮件 链接 。 


当 读者 单 击 【站 长 信箱 】 链 接 时 ， 会 自动 弹出 电子 邮件 客户 端 窗口 以 编写 电子 邮件 ， 如 图 
3-7 所 示 。 
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[二 RE 未 名 - 起 作 (HTMD a 
| = “| 凡 。 亚 sax+rex 轴 na 上 
襄 x 国文 御 vp 后 去 ~ 
pS Ee 
| -sm "|B me- 
sm 本 FE | tt 
oO x A | [PEeaaesom  ，， 一 ] 
间 ”Dx\ 本 书 大 代码 kodevj 国 “~ 中 px 本 书 源 代码 ， 区 ao- ] 
导 电子 邮件 链接 x 回 wh i ] 
文件 (F) 编辑 () 查看 (V) 收藏 夫 (A) 工具 (D) 帮助 (H) 。 图 
雇 汪 百 度 - 下 , 你 M40 首 
(ar a | 
图 3-6 链接 到 电子 邮件 图 3-7 电子 邮件 客户 端 窗口 


3.2.3 ”设置 以 新 窗口 显示 超 链 接 页 面 


默认 情况 下 ， 当 单 击 超 链 接 时 ， 目 标 页 面 会 在 当前 窗口 中 显示 并 蔡 换 掉 当前 页 面 的 内 容 。 
如 果 要 实现 在 单 击 某 个 超 链接 后 在 新 的 浏览 器 窗口 中 显示 目标 页 面 ， 就 需要 使 用 <a> 标 记 的 
target 属性 。target 属性 取 值 有 4 个 ， 即 _blank、_self、_top、_parent。 由 于 HTMLS 不 再 支持 
框 ， 所 以 top、_parent 这 两 个 取 值 不 常用 。 本 小 节 仅 为 读者 讲解 blank、_self 值 。 其 中 ，_blank 
表示 在 新 窗口 中 显示 超 链接 页 面 。_self 表示 在 当前 窗口 中 显示 超 链 接 页 面 。 当 省 略 target 属性 
时 ， 默 认 取 值 为 _self。 


【 例 3.5】 《实例 文件 :ch03\3.5.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 以 新 窗口 方式 打开 </title> 

</head> 

<body> 

<a href="a.html target=" blank"> 新 窗口 </a> 
</body> 

</html> 


在 正 11.0 中 预览 网 页 效果 ， 如 图 3-8 所 示 。 


x 


- OO 
Ge 局 “D:\ 本 书 源 代码 code\ 国 ~ 上 
居 以 新 窗口 方式 打开 Be 

文件 (F) 编辑 (E) 查看 (V) 收藏 夫 (A) 工具 (T) ” 
竟 当 百 度 一 下 ， 你 咒 知 道 


新 窗 上 


图 3-8 新 窗口 页 面 
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3.3 创建 热点 区 域 


在 浏览 网 页 时 读者 会 发 现 ， 当 单 击 一 张 图 片 的 不 同 区域 时 会 显示 不 同 的 链接 内 容 ， 这 就 是 
图 片 的 热点 区 域 。 所 谓 图 片 的 热点 区 域 ， 就 是 将 一 个 图 片 划分 成 若干 个 链接 区 域 。 访 问 者 单 击 
不 同 的 区 域 会 链接 到 不 同 的 目标 页 面 。 


域 使 用 标记 <map> 和 <area>， 语 法 格式 如 下 : 


<img src=" 图 片 地 址 ” usemap="# 名 称 "> 
<map id="# 名 称 "> 
<area shape="rect" coords="10,10,100,100" href="#"> 
<area shape="circle" coords="120,120,50" href="#"> 
<area shape="poly" coords="78,13,81,14,53,32,86,38" href="#"> 
</map> 
在 上 面 的 语法 格式 中 ， 需 要 读者 注意 以 下 几 点 : 
(1) 要 想 建立 图 片 热点 区 域 ， 必 须 先 插入 图 片 。 注 意 ， 图 片 必须 增加 usemap 属性 ， 说 明 
该 图 像 是 热 区 映射 图 像 , 属性 值 必 须 以 “#” 开 头 , 如 #pic。 那么 上 面 一 行 代码 可 以 修改 为 : <img 
sre=" 图 片 地 址 " usemap="#pic">。 
(2)<map> 标 记 只 有 一 个 属性 id, 其 作用 是 为 区 域 命名 , 属性 值 必须 与 <img> 标 记 的 usemap 
属性 值 相 同 ， 修 改 上 述 代 码 为 : <map id="#pic">。 
(3) <area> 标 记 主 要 是 定义 热点 区 域 的 形状 及 超 链 接 ， 它 有 三 个 相应 的 属性 。 


@ shape 属性 ， 控 件 划分 区 域 的 形状 ， 其 取 值 有 3 个 ， 分 别 是 rect (矩形) 、circle 
( 圆 形 ) 和 poly (多 边 形 ) 。 
@ coords 属性 ， 控 制 区 域 的 划分 坐标 。 
多 ”如果 shape 属性 取 值 为 rect， 那 么 coords 的 设置 值 分 别 为 矩形 的 左上 角 x、y 坐 
标点 和 右 下 角 x、y 坐标 点 ， 单 位 为 像素 。 
多 ”如果 shape 属性 取 值 为 citrcle， 那 么 coords 的 设置 值 分 别 为 圆 形 圆心 x、y 坐标 
点 和 半径 值 ， 单 位 为 像素 。 
多” 如果 shape 属性 取 值 为 poly， 那 么 coords 的 设置 值 分 别 为 多 边 形 在 各 个 点 的 xX、 
y 坐标 ， 单 位 为 像素 。 
@ 。 href 属性 是 为 区 域 设置 超 链接 的 目标 ,设置 值 为 “#” 时 ， 表 示 为 空 链接 。 
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3.4 浮动 框架 iframe 


HTML5 中 已 经 不 支持 frameset 框架 ， 但 是 它 仍然 支持 frame 浮动 框架 的 使 用 。 浮 动 框架 
可 以 自由 控制 窗口 大 小 ， 可 以 配合 表格 随意 地 在 网 页 中 的 任何 位 置 插入 窗口 。 实 际 上 就 是 在 窗 
口中 再 创建 一 个 窗口 。 

使 用 过 ame 创建 浮动 框架 的 格式 如 下 : 


<iframe src=" 链 接 对 象 "” > 


其 中 ，src 表示 浮动 框架 中 显示 对 象 的 路 径 ， 可 以 是 绝对 路 径 ， 也 可 以 是 相对 路 径 。 例 如 ， 
下 面 的 代码 是 在 浮动 框架 中 显示 到 百度 网 站 。 


【 例 3.6】 “实例 文件 :ch03\3.6.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 浮 动 框架 中 显示 百度 网 站 </title> 

</head> 

<body> 

<iframe src="http://www.baidu.com"></iframe> 
</body> 

</html> 


在 正 11.0 中 预览 网 页 效果 ， 如 图 3-9 所 示 。 


- O x 
I 可 “DA 本 书 源 代 友 Kode 齐 国 ”所 | DA 本 书 源 代 到 ， 
| zh 中 a 示 百度 网 站 。 x | 


文件 (F) 帝 5(6 查看 (V 收 基 夫 (A) 工具 (T) 帮助 [H] 
将 各 EE 一下 , 人 rt0 首 


00 
Baid 百度 


图 3-9 浮动 框架 效果 
从 预览 结果 可 见 ， 浮 动 框架 在 页 面 中 又 创建 了 一 个 窗口 ， 默 认 情 况 下 浮动 框架 的 宽度 和 高 
度 为 220X120 像素 。 如 果 需 要 调整 浮动 框架 尺寸 , 请 使 用 CSS 样式 。 修 改 上 述 浮动 框架 尺寸 ， 
需 在 <head></head> 标 记 中 间 增 加 如 下 CSS 代码 。 


<style> 
iframe{ 
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width:1200px; /* 设 置 浮动 框架 的 宽度 */ 
height:800px; /* 设 置 浮动 框架 的 高 度 */ 
border:none; /* 设 置 无 边框 效果 */ 


} 
</style> 


在 正 11.0 中 预览 网 页 效果 ， 如 图 3-10 所 示 。 


图 3-10 


修改 宽度 和 高 度 的 浮动 框架 


枝 巧 根 示 在 HIML5 中 ，iframe 仅 支持 src 属性 ， 再 无 其 他 属性 。 


3.5 综合 实例 一 一 


用 Dreamweaver 精确 定位 热点 区 域 


上 面 讲述 了 HTML 创建 热点 区 域 的 方法 ， 其 中 最 让 读者 头痛 的 地 方 就 是 坐标 点 的 定位 。 
对 于 简单 的 形状 还 可 以 ， 如 果 边 数 较 多 且 形 状 复杂 ， 那 么 确定 坐标 点 的 工程 量 就 很 大 ， 因 此 不 


建议 使 用 HIML 代码 去 完成 。 这 是 


有 将 为 读者 介绍 一 个 快速 且 能 精确 定位 热点 区 域 的 方法 ， 使 


用 Dreamweaver CC 可 以 很 方便 地 实现 这 个 功能 。 
Dreamweaver CC 创建 图 片 热点 区 域 的 具体 操作 步骤 如 下 : 


Li 加 创建 一 个 HTML 文档 ， 插 入 一 张 图 片 文 件 ， 如 图 3-11 所 示 。 


图 3-11 插入 图 片 


到 选择 图 片 ， 在 Dreamweaver CC 中 打开 属性 面板 ， 面 板 左下 角 有 3 个 蓝 色 图 标 按 钮 ， 
依次 代表 抵 形 、 圆 形 和 多 边 形 热 点 区 域 。 单 击 左边 的 【 憩 形 热点 】〗】 工 具 图 标 ， 如 图 3-12 所 示 。 
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是 


图 都 ,15K 。 宽 如 [1001 | 庆 文 件 G@) insees/04 jp GDND| YY 类 QQ 无 加 @ 
包 面包 四] 久 四 BD WM FP 多 

地 图 虽 委 直 边 距 o) | 目标) 边框 四 ) Bo0A 
NR 问 jD VJ 水 平 过 下 四 ] 原始 岛 忠 对 开 旭 了 以 什 ™ Re 


图 3-12 Dreamweaver CC 中 的 属性 面板 


加 | 将 扎 标 指针 移动 到 图 片上 ， 以 【创意 信息 平台 】 栏 中 的 矩形 大 小 为 准 , 按 下 鼠标 左 键 ， 
从 左上 方向 右 下 方 拖 负 鼠标 ， 得 到 矩形 区 域 ， 如 图 3-13 所 示 。 
0 旨 绘制 出 未 的 热 区 呈现 出 半 透 明 状 态 ， 效 果 如 图 3-14 所 示 。 


图 3-13 ”绘制 矩形 热点 区 域 图 3-14 完成 矩形 热点 区 域 的 绘制 


鸭 鲜 如 有 果 绘 制 出 来 的 矩形 热 区 有 误差 , 可 以 通过 属性 面板 中 的 【指针 热点 】 工 具 进 行 编辑 ， 
如 图 3-15 所 示 。 


| | 
热点 链接 由 扩 
图 时 四 
地 图 op 
NR DOY 


图 3-15 【指针 热点 】 工 具 


四 8 完成 上 述 操 作 之 后 ,保持 矩形 热 区 被 选中 状态 ， 然 后 在 属性 面板 中 的 【链接 】 文 本 框 
中 输入 该 热点 区 域 链接 对 应 的 跳 转 目标 页 面 。 

到 在 【目标 】〗 下 拉 列 表 框 中 有 4 个 选项 ， 它 们 决定 着 链接 页 面 的 弹出 方式 。 这 里 如 果 选 
择 了 【_blank】〗， 那 么 矩形 热 区 的 链接 页 面 将 在 新 的 窗口 中 弹出 。 如 果 【 目 标 〗 选项 保持 空白 ， 
就 表示 仍 在 原来 的 浏览 器 窗口 中 显示 链接 的 目标 页 面 。 这 样 ， 撼 形 热 点 区 域 就 设置 好 了 。 

tj 接 下 来 继续 为 其 他 菜单 项 创建 算 形 热 点 区 域 。 操 作 方 法 请 参阅 上 面 的 步骤 , 完成 后 的 
效果 如 图 3-16 所 示 。 


图 3-16 为 其 他 菜单 项 创建 矩形 热点 区 域 


L 加 完成 后 保存 并 预览 页 面 。 可 以 发 现 ， 凡 是 绘制 了 热点 的 区 域 ， 鼠 标 指针 移 上 去 时 就 会 
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变 成 手 形 ， 单 击 就 会 跳 转 到 相应 的 页 面 。 
加 至 此 , 使 用 热点 区 域 制 作 网 站 的 导航 就 完成 了 。 此 时 页 面相 应 的 HTML 源 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title> 创 建 热点 区 域 </title> 

</head> 

<body> 

<img src="images/04.jpg" width="1001" height="87" border="0" 

usemap="#Map"> 

<map name="Map"> 
<area shape="rect" coords="298,5,414,85" href="#"> 
<area shape="rect" coords="412,4,524,85" href="#"> 
<area shape="rect" coords="525,4,636,88" href="#"> 
<area shape="rect" coords="639,6,749,86" href="#"> 
<area shape="rect" coords="749,5,864,88" href="#"> 
<area shape="rect" coords="86]1,6,976,86" href="#"> 

</map> 

</body> 

</html> 


可 以 看 到 ，Dreamweaver CC 自动 生成 的 HTML 代码 结构 和 前 面 介绍 的 是 一 样 的 ， 但 是 所 
有 的 坐标 都 自动 计算 出 来 了 ， 这 正 是 网 页 制作 工具 的 快捷 之 处 。 使 用 这 些 工具 本 质 上 和 手工 编 
写 HTML 代码 没有 区 别 ， 只 是 使 用 这 些 工 具 可 以 提高 工作 效率 。 


| % | 本 书 所 讲述 的 手工 编写 HTML 代码 的 方法 在 Dreamweaver CC 工具 中 几乎 都 有 对 

ca6E 3 应 的 操作 ， 请 读者 自行 研究 ， 以 提高 编写 HTML 代码 的 效率 。 但 是 请 读者 注意 ， 
使 用 网 页 制作 工具 前 ， 一 定 要 明白 这 些 HTML 标记 的 作用 。 因 为 一 个 专业 的 网 页 
设计 师 必 须 具备 HTML 方面 的 知识 ， 不 然 再 强大 的 工具 也 只 能 是 无 根 之 树 、 无 源 
之 泉 。 


3.6 专家 解 惑 


1. 在 创建 超 链接 时 ， 使 用 绝对 URL 还 是 相对 URL ? 

答 : 在 创建 超 链 接 时 ， 如 果 要 链接 的 是 另外 一 个 网 站 中 的 资源 ， 就 需要 使 用 完整 的 绝对 
URL; 如 果 在 网 页 中 创建 内 部 链接 ， 一 般 使 用 相对 当前 文档 或 站 点 根 文件 夹 的 相对 URL。 

2. 链接 增多 后 ， 网 站 如 何 设置 目录 结构 以 方便 维护 ? 

答 : 当 一 个 网 站 的 网 页 数量 增加 到 一 定 程度 以 后 ， 网 站 的 管理 与 维护 将 变 得 非常 烦琐 ， 因 
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此 掌握 一 些 网 站 管理 与 维护 的 技术 是 非常 实用 的 ， 可 以 节省 很 多 时 间 。 建 立 适 合 的 网 站 文件 存 
储 结构 ， 可 以 方便 网 站 的 管理 与 维护 。 通 常 使 用 的 3 种 网 站 文件 组 织 结构 方案 及 文件 管理 遵循 
的 原则 如 下 : 


(1) 按照 文件 的 类 型 进行 分 类 管理 。 将 不 同类 型 的 文件 放 在 不 同 的 文件 夹 中 ， 这 种 存储 
方法 适合 于 中 小 型 的 网 站 ， 这 种 方法 是 通过 文件 的 类 型 对 文件 进行 管理 。 

(2) 按照 主题 对 文件 进行 分 类 。 网 站 的 页 面 按照 不 同 的 主题 进行 分 类 储存 。 同 一 主题 的 
所 有 文件 存放 在 一 个 文件 夹 中 ， 然 后 进一步 细 分 文件 的 类 型 。 这 种 方案 适用 于 页 面 与 文件 数量 
众多 、 信 息 量 大 的 静态 网 站 。 

(3) 对 文件 类 型 进行 进一步 细 分 存储 管理 。 这 种 方案 是 第 一 种 存储 方案 的 深化 ， 将 页 面 
进一步 细 分 后 进行 分 类 存储 管理 。 这 种 方案 适用 于 文件 类 型 复杂 、 包 含 各 种 文件 的 多 媒体 动态 
网 站 。 


第 4 章 ”用 HTML5 创 建 表格 


在 HTML 中 ， 表 格 不 但 可 以 清晰 地 显示 数据 ， 而 且 可 以 用 于 页 面 布局 。 目 前 表格 布局 已 
经 被 抛弃 ， 本 章 只 为 读者 介绍 表格 如 何 显示 数据 。 


4.1 表格 基本 结构 及 操作 


HTML 中 的 表格 类 似 于 Word 软件 中 的 表格 ， 尤 其 在 使 用 网 页 制作 工具 时 ， 基 本 操作 也 很 
相似 。HTML 制作 表格 的 原理 是 使 用 相关 标记 定义 完成 ， 如 表格 对 象 <table>、 行 对 象 <t>、 单 
元 格 对 象 <tt>， 其 中 单元 格 的 合并 在 表格 操作 中 应 用 广泛 。 


4.1.1 表格 基本 结构 


使 用 表格 显示 数据 ， 可 以 更 直观 和 清晰 。 在 HTML 文档 中 表格 主要 用 于 显示 数据 ， 虽 然 
可 以 使 用 表格 布局 ， 但 是 不 建议 使 用 ， 它 有 很 多 弊端 。 表 格 一 般 由 行 、 列 和 单元 格 组 成 ， 如 图 
4-1 所 示 。 


图 4-1 表格 的 组 成 


<table> 标 记 用 于 标识 一 个 表格 对 象 的 开始 ，</table> 标 记 用 于 标识 一 个 表格 对 象 的 结束 。 
一 个 表格 中 ， 只 允许 出 现 一 对 <table> 标 记 。 在 HTMLS5 中 不 再 支持 它 的 任何 属性 。 

<tr> 标 记 用 于 标识 表格 一 行 的 开始 ，</tr> 标 记 用 于 标识 表格 一 行 的 结束 。 表 格 内 有 多 少 对 
<tr></tr> 标 记 ， 就 表示 表格 中 有 多 少 行 。 在 HIML5 中 不 再 支持 它 的 任何 属性 。 

<td> 标 记 用 于 标识 表格 某 行 中 的 一 个 单元 格 开始 , </td> 标 记 用 于 标识 表格 某 行 中 的 一 个 单 
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元 格 结束 。<td></td> 标 记 书写 在 <t></t> 标 记 内 ,一 对 <tr></tr> 标 记 内 有 多 少 对 <td></td> 标 记 ， 
就 表示 该 行 有 多 少 个 单元 格 。 在 HIMLS 中 它 仅 有 colspan 和 rowspan 两 个 属性 ， 详 见 4.1.2 小 
最 基本 的 表格 , 必须 包含 一 对 <table></table> 标 记 、 一 对 或 几 对 <tr></tr> 标 记 以 及 一 对 或 几 
对 <td></td> 标 记 。 一 对 <table></table> 标 记 定义 一 个 表格 ， 一 对 <tr></tr> 标 记 定义 一 行 ， 一 对 
<td></td> 标 记 定义 一 个 单元 格 。 
例如 ， 定 义 一 个 4 行 3 列 的 表格 。 


【 例 4.1】 《实例 文件 ，ch04M4.1.html) 
<!DOCTYPE html> 
<html> 
<head> 
<title> 表 格 基本 结构 </title> 
</head> 
<body> 
<table> 
<tr> 
<td>Al</td> 
<td>B1</td> 
<td>C1</td> 
</tr> 
<tr> 
<td>A2</td> 
<td>B2</td> 
<td>C2</td> 
</tr> 
<tr> 
<td>A3</td> 
<td>B3</td> 
<td>C3</td> 
</tr> 
<tr> 
<td>A4</td> 
<td>B4</td> 
<td>c4</td> 
</tr> 
</table> 
</body> 
</html> 


在 正 11.0 中 预览 网 页 效果 ， 如 图 4-2 所 示 。 
从 预览 图 中 读者 会 发 现 ， 表格 没有 边框 ， 行 高 及 列 宽 也 无 法 控制 。 上 述 知 识 讲述 时 ， 提 到 
HTML5 中 除了 <td> 标 记 提 供 两 个 单元 格 合并 属性 之 外 ,<table> 和 <tr> 标 记 已 没有 任何 属性 。 那 
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么 如 何 修饰 表格 呢 ? 表格 的 所 有 外 观 设置 都 需要 通过 CSS 样式 完成 ， 详 见 CSS 章节 部 分 。 
- ODO x 
若 D:\ 丰 书 深 t 码 code 团 ~ 局 
is 者 覆 天 本 结 移 x 加 
文件 (F) 篇 加 (下 看 V) 收藏 夫 (A) 工具 (加 | 六 
请 当 百 度 ~ 下 ,你 0 首 


AlBlC1I 
A2 B2 C2 
A3B3C3 
A4B4C4 


图 4-2 表格 基本 结构 


4.1.2 合并 单元 格 


在 实际 应 用 中 ， 并 非 所 有 表格 都 是 规范 的 几 行 几 列 ， 有 时 需要 将 某 些 单元 格 进行 合并 ， 以 
符合 某 种 内 容 上 的 需要 。 在 HTML 中 合并 的 方向 有 两 种 ， 一 种 是 上 下 合并 ， 一 种 是 左右 合并 ， 
这 两 种 合并 方式 只 需要 使 用 <td> 标 记 的 两 个 属性 即 可 。 


1. 用 colspan 属性 合并 左右 单元 格 
左右 单元 格 的 合并 需要 使 用 <td> 标 记 的 colspan 属性 完成 ， 格 式 如 下 : 


<td colspan=" 数 值 "> 单元 格 内 容 </td> 


其 中 ，colspan 属性 的 取 值 为 数值 型 整数 数据 ， 代 表 几 个 单元 格 进行 左右 合并 。 
例如 ， 在 上 面 的 表格 的 基础 上 ， 将 Al 和 Bl 单元 格 合并 成 一 个 单元 格 。 为 第 一 行 的 第 一 
个 <td> 标 记 增 加 colspan="2" 属 性 ， 并 且 将 Bl 单元 格 的 <td> 标 记 删 除 。 


【 例 4.2】 “实例 文件 :ch04\.2.html) 

<!DOCTYPE html> 

<html> 

<head> 

<title> 单 元 格 左右 合并 </title> 

</head> 

<body> 

<table border="1"> <!-- 设 置 表格 边框 的 粗细 --> 


<tr> 

<td colspan="2">Al B1</td> <!-- 合 并 第 一 个 行 的 列 1 和 列 2 单元 格 --> 
<td>C1</td> 

私 /EE> 

<tr> 

<td>A2</td> 

<td>B2</td> 
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<td>C2</td> 
二 /二 > 
LE> 
<td>RA3</td> 
<td>B3</td> 
<td>C3</td> 
</tr> 
< 中 光 
<td>A4</td> 
<td>B4</td> 
<td>C4</td> 
</tr> 
</table> 
</body> 
</html> 


在 下 11.0 中 预览 网 页 效果 ， 如 图 4-3 所 示 。 


> 口 x 
| 站 DNRA\ode VW - C 
| 号 下 元 元 石 全 开 中 
文人 (过 吉 晶 -二 看 V 收 蓝 赤 (A) 工 R(D 前 
部 3 一下, 0 


1 Bljc] 
2]B2jc3 
四 国 因 
4jB4jcd 


图 4-3 单元 格 左右 合并 
从 预览 图 中 可 以 看 到 ，A1 和 B1 单元 格 合并 成 一 个 单元 格 ，C1 还 在 原来 的 位 置 上 。 
。 3 | 合并 单元 格 以 后 ， 相 应 的 单元 格 标记 就 应 该 减少 ， 例 如 ，AI 和 B1 合并 后 ，B1 音 


cg 元 格 的 <td></td> 标 记 就 应 该 丢掉 ， 否 则 单元 格 就 会 多 出 一 个 ,并且 后 面 单元 格 依次 
向 右 位 移 。 


2. 用 rowspan 属性 合并 上 下 单元 格 

上 下 单元 格 的 合并 需要 为 <td> 标 记 增加 rowspan 属性 ， 格 式 如 下 : 

<td rowspan=" 数 值 "> 单 元 格 内 容 </td> 

其 中 ，rowspan 属性 的 取 值 为 数值 型 整数 数据 ， 代 表 几 个 单元 格 进行 上 下 合并 。 


例如 ， 在 上 面 的 表格 的 基础 上 ， 将 Al 和 A2 单元 格 合并 成 一 个 单元 格 。 为 第 一 行 的 第 一 
个 <td> 标 记 增加 rowspan="2" 属 性 ， 并 且 将 A2 单元 格 的 <td> 标 记 删 除 。 


【 例 4.3】 《实例 文件 :ch04\M4.3.html) 


<!DOCTYPE html> 
<html> 
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<head> 
<meta charset="utf-8" /> 
<title> 单 元 格 左右 合并 </title> 
</head> 
<body> 
<table border="1"> <!-- 设 置 表格 边框 的 粗细 --> 
EE 
<td rowspan="2">A1A2</td> <!-- 合 并 第 1 个 行 和 第 2 行 的 列 1 和 列 2 单元 格 --> 
<td>B1</td> 
<td>C1</td> 
</tr> 
<tr> 
<td>B2</td> 
<td>C2</td> 
</tr> 
二 过 
<td>RA3</td> 
<td>B3</td> 
<td>C3</td> 
过 /下 天 > 
中 
<td>A4</td> 
<td>B4</td> 
<td>C4</td> 
</tr> 
</table> 
</body> 
</html> 


在 正 11.0 中 预览 网 页 效果 ， 如 图 4-4 所 示 。 


= 自 站 
司 “D+ 在 书 尝 代码 codev 国 ~ 咱 

| 局 单元 属 左 右 合 并 本 

文件 (F) 篇 辐 (F) 查看 (V) 收藏 夫 (A) 工具 (D] 其” 
请 各 EE 度 -下 , 人 0 道 


图 4-4 单元 格 上 下 合并 
从 预览 图 中 可 以 看 到 ，Al 和 A2 单元 格 合并 成 一 个 单元 格 。 
通过 上 面 对 左右 单元 格 合并 和 上 下 单元 格 合 并 的 操作 , 读者 会 发 现 合并 单元 格 的 实质 就 是 
“丢掉 ” 某 些 单元 格 。 对 于 左右 合并 ， 就 是 以 左 侧 为 准 ， 将 右 侧 要 合并 的 单元 格 “ 丢 掉 ”; 对 
于 上 下 合并 ， 就 是 以 上 方 为 准 ， 将 下 方 要 合并 的 单元 格 “ 丢 掉 ”。 如 果 一 个 单元 格 既 要 向 右 合 
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并 ， 又 要 向 下 合并 ， 该 如 实现 呢 ? 


【 例 4.4】 《实例 文件 : ch04\.4.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 单 元 格 左右 合并 </title> 
</head> 
<body> 
<table border="1"> <!-- 设 置 表格 边框 的 粗细 --> 
区 下 
<td colspan="2" rowspan="2">R1B1<br>R2B2</td> ”<!-- 既 要 向 右 合并 ， 又 要 向 下 
合并 --> 
<td>cl</td> 
</tr> 
<tP> 
<td>C2</td> 
</tr> 
<tr> 
<td>A3</td> 
<td>B3</td> 
<td>C3</td> 
</tr> 
<tr> 
<td>A4</td> 
<td>B4</td> 
<td>C4</td> 
</tr> 
</table> 
</body> 
</html> 


在 正 11.0 中 预览 网 页 效果 ， 如 图 4-5 所 示 。 


Sr 口 Xx 
辕 DA 本 书 涯 代 友 codeV 莉 - 号 
续 单元 售 左 右 全 并 “| 


文件 (F) 编 三 (天 看 (V) 收藏 天 (A) 工具 () 
请 全 百度 一下 ， 作 990 过 


AlBI |c1 
IA2B2 | 
[AilBal[c3l 
AdjB4lcd| 


图 4-5 ”两 个 方向 合并 单元 格 


从 上 面 的 代码 可 以 看 到 ，Al 单元 格 向 右 合 并 Bl 单元 格 ， 向 下 合并 A2 单元 格 ， 并 且 A2 
单元 格 向 右 合 并 B2 单元 格 。 
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3. 使 用 Dreamweaver CC 合并 单元 格 
使 用 HTML 创建 表格 非常 麻烦 ，Dreamweaver CC 工具 提供 了 表格 的 快捷 操作 ， 类 似 于 在 
Word 工具 中 编辑 表格 的 操作 。 在 Dreamweaver CC 中 创建 表格 ， 只 需要 单 击 【插入 】 菜 单 下 的 
【表格 】 命 令 ， 在 出 现 的 对 话 框 中 指定 表格 的 行 数 、 列 数 、 宽 度 和 边框 ， 即 可 在 光标 处 创建 一 
个 空白 表格 。 选 择 表格 之 后 ， 属 性 面板 提供 了 表格 的 常用 操作 ， 如 图 4-6 所 示 。 


国 束 格 行 四 宽 加 | | 售 素 。 辟 | 填充 外 六 由 了 ”wv| 类 名 | 无 加 
一 v| © 间距 G@) 边框 @) 

Bm J 

5 


图 4-6 表格 属性 面板 


表格 属性 面板 中 的 操作 ， 请 结合 前 面 讲述 的 HTML 语言 。 对 于 按钮 命令 ， 请 读者 
aa 将 据 标 是 停 于 按钮 之 上 ， 数 秒 之 后 会 出 现 命令 提示 。 


关于 表格 的 操作 不 再 袭 述 ， 请 读者 自行 操作 ， 这 里 重点 讲解 如 何 使 用 Dreamweaver CC 合 
并 单元 格 。 在 Dreamweaver CC 可 视 化 操作 中 ， 提 供 了 合并 与 拆 分 单元 格 两 种 操作 。 拆 分 单元 
格 的 操作 ， 其 实 还 是 逆行 的 合并 操作 。 进 行 单元 格 合并 和 拆 分 时 ， 请 将 光标 置 于 单元 格 内 ， 如 
果 选 择 了 一 个 单元 格 ， 拆 分 命令 有 效 〈 如 图 4-7 所 示 ) ， 如 果 选 择 了 两 个 或 两 个 以 上 单元 格 ， 
合并 命令 有 效 。 


[yxamL| | 格式 到 ) | 无 Y 类 | 无 v BI 江 和 拉丝 些 标题 

国 css DL) 无 ~ 链接 已 ) YD 目标 @ 

国 单元 格 。 水 平 @)| 默认 vY| 宽 四 不 换行 @) 口 ” 背 县 颜色 (G) 厂 -| 
一 六 。 垂直 部 )| 默 认 ~ | 高 中 标题 到 ) 口 

pe 拆 委 单元 格 


图 4-7 拆 分 单元 格 有 效 


4.2 完整 的 表格 标记 


上 面 讲述 了 表格 中 最 常用 也 是 最 基本 的 三 个 标记 <table>、<tr> 和 <td>， 使 用 它们 可 以 构建 
出 最 简单 的 表格 。 为 了 让 表格 结构 更 清楚 ， 以 及 配合 后 面 学 习 的 CSS 样式 ， 更 方便 地 制作 各 种 
样式 的 表格 ， 表 格 中 还 会 出 现 表 头 、 主 体 、 脚 注 等 。 

按照 表格 结构 ， 可 以 把 表格 的 行 分 组 ， 称 为 “ 行 组 ”。 不 同 的 行 组 具有 不 同 的 意义 。 行 组 
分 为 3 类 一 一 “ 表 头 ”“ 主 体 ” 和 “脚注 ”， 三 者 相应 的 HTML 标记 依次 为 <thead>、<tbody> 
和 <tfoot>。 
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此 外 ， 在 表格 中 还 有 两 个 标记 。 标 记 <caption> 表 示 表 格 的 标题 ， 在 一 行 中 除了 <td> 标 记 表 
示 一 个 单元 格 以 外 ， 还 可 以 使 用 <th> 定 义 表格 内 的 表 头 单元 格 。 


【 例 4.5】 《实例 文件 : ch04V.5-html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 完 整 表格 标记 </title> 
<style> 
tfoot{ 
background-color:#FF3; 
} 
</style> 
</head> 
<body> 
<table border="1"> <!-- 设 置 表格 边框 的 粗细 --> 
<caption> 学 生成 绩 单 </caption> 
<thead> 
二 
<th> 姓 名 </th><th> 性 别 </th><th> 成 绩 </th> 
</tr> 
</thead> 
<tfoot> 
<tr> 
<td> 平 均 分 </td><td colspan="2">540</td> 
</tr> 
</tfoot> 
<tbody> 
< 
<td> 张 三 </td><td> 男 </td><td>560</td> 
<AEr> 
< 
<td> 李 四 </td><td> 男 </td><td>520</td> 
</tr> 
</tbody> 
</table> 
</body> 
</html> 


从 上 面 的 代码 可 以 发 现 ， 使 用 <caption> 标 记 定义 了 表格 标题 ，<thead>、<tbody> 和 


<tfoot> 标 记 对 表格 进行 了 分 组 。 在 <thead> 部 分 使 用 <th> 标 记 代 蔡 <td> 标 记 定 义 单元 格 ， 
<th> 标 记 定 义 的 单元 格 默认 加 粗 。 网 页 预览 效果 如 图 4-8 所 示 。 
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ee 口 x 
@ 司 “Dx 本 书 源 代码 vcodevi 国 ~ 上 
达 完整 去 格 标记 x | 

文件 (F) 编辑 (日 、 查 看 (V) 收 茂 夫 (A) 工具 (D ” 
这 各 百度 一 下 , 你 1 道 

学 生成 绩 单 

姓名 ][ 性 别 | 成 细 
张 三 || 男 jl560 
李 四 | 男 jl520 
5954 | 


图 4-8 完整 的 表格 结构 


<caption> 标记 必须 紧 随 <table> 标记 之 后 。 


4.3 综合 实例 一 一 制作 计算 机 报价 单 


利用 所 学 的 表格 知识 ， 制 作 如 图 4-9 所 示 的 计算 机 报价 单 。 


计算 机 报价 单 


图 4-9 计算 机 报价 单 
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具体 操作 步骤 如 下 : 


[ 畏 新 建 HTML 文档 ， 并 对 其 简化 ， 代 码 如 下 所 示 。 


<!DOCTYPE htm1> 

<html> 

<head> 

<meta charset="utf-8"/> 
<title> 完 整 表格 标记 </title> 
</head> 

<body> 

</body> 

</html> 


I 园 保存 HTML 文件 ， 选 择 相应 的 保存 位 置 ， 文 件 名 为 “综合 实例 一 制作 计算 机 报价 
单 .html”。 
L 在 HTML 文档 的 body 部 分 增加 表格 及 内 容 ， 代 码 如 下 所 示 。 


<table> 
<caption> 计 算 机 报价 单 </caption> 
中 
<th> 型 号 </th> 
<th> 类 型 </th> 
<th> 价 格 </th> 
<th> 图 片 </th> 
</tr> 
EE 
<td> 宏 基 (Acer) AS4552-P362G32MNCC</td> 
<tq> 笔 记 本 </td> 
<td>¥2799</td> 
<td><img src="images/Acer.jpg" width="120" height="120"></td> 
< /Er> 
RE 
<td> 戴 尔 (Del1) 14VR-188</td> 
<td> 笔 记 本 </td> 
<td>¥3499</td> 
<td><img src="images/Dell.jpg" width="120" height="120"></td> 
</tr> 
<tr> 
<td> 联 想 (Lenovo) G470AH2310W42G500P7CW3 (DB)-CN </td> 
<td> 笔 记 本 </td> 
<td>¥4149</td> 
<td><img src="images/Lenovo.jpg" width="120" height="120"></td> 
</tr> 
<tr> 
<td> 戴 尔 家 用 (DELL) I560SR-656</td> 
<td> 人 台式 </td> 
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<td>¥3599</td> 

<td><img src="images/DellT.jpg" width="120" height="120"></td> 
</tr> 
<EF> 

<td> 宏 图 奇 眩 (Hiteker) HS-5508-TF</td> 

<tq> 人 台式 </td> 

<td>¥3399</td> 

<td><img src="images/Hiteker.jpg" width="120" height="120"></td> 
</tr> 
tn 

<td> 联 想 (Lenovo) G470</td> 

<td> 笔 记 本 </td> 

<td>¥4299</td> 

<td><img src="images/LenovoG.jpg" width="120" height="120"></td> 
<Atr> 

</table> 


利用 <caption> 标 记 制 作 表格 的 标题 ，<th> 代 蔡 <td> 作 为 标题 行 单元 格 。 可 以 将 图 片 放 在 单 
元 格 内 ， 即 在 <td> 标 记 内 使 用 <img> 标 记 。 


用 在 HTML 文档 的 head 部 分 ， 增 加 CSS 样式 ,为 表格 增加 边框 及 相应 的 修饰 ,代码 如 
下 所 示 。 


<style> 

table{ 
/* 表 格 增加 线 宽 为 3 的 橙色 实 线 边框 */ 
border:3px solid #F60; 

} 

caption{ 
/* 表 格 标题 字号 36*/ 
font-size:36px; 

} 

Eye 
/* 表 格 单元 格 (th、td) 增加 边线 */ 
border:1lpx solid #F90; 

</style> 


L@ 保存 网 页 后 ， 即 可 查看 最 终 效果 。 


4.4 专家 解 惑 


1. 在 Dreamweaver CC 中 如 何 选 择 多 个 单元 格 ? 
答 : 在 Dreamweaver CC 中 选择 单元 格 的 操作 类 似 于 文字 处 理工 具 Word, 按 下 鼠标 左 键 拖 
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动 鼠 标 ， 经 过 的 单元 格 都 会 被 选择 。 按 下 Ctrl 键 ， 依 次 单 击 某 个 单元 格 ， 这 些 单元 格 将 会 被 选 
择 ， 选 择 的 单元 格 可 以 是 不 连续 的 。 在 需要 选择 区 域 的 开头 单元 格 中 单 击 ， 按 下 Shift 键 ， 在 
区 域 的 末尾 单元 格 中 单 击 ， 开 头 和 结尾 单元 格 组 成 的 区 域内 的 所 有 单 击 格 将 会 被 选择 。 

2. 表格 除了 显示 数据 ， 还 可 以 进行 布局 ， 为 何不 使 用 表格 进行 布局 ? 

答 : 在 互联 网 刚刚 开始 普及 时 ， 网 页 非常 简单 ， 形 式 也 非常 单调 ， 当 时 美国 设计 师 David 
Siegel 发 明了 使 用 表格 布局 ， 风 靡 全 球 。 在 表格 布局 的 页 面 中 ， 表 格 不 但 需要 显示 内 容 ， 还 要 
控制 页 面 的 外 观 及 显示 位 置 ， 导 致 页 面 代 码 过 多 ， 结 构 与 内 容 无 法 分 离 。 这 样 就 给 网 站 的 后 期 
维护 和 很 多 其 他 方面 带 来 了 麻烦 。 

3. 使 用 <thead>、<tbody> 和 <tfoot> 标 记 对 行进 行 分 组 的 意义 何在 ? 

答 : 在 HIML 文档 中 增加 <thead>、<tbody> 和 <tfoot> 标 记 ， 虽然 从 外 观 上 不 能 看 出 任何 变 
化 ， 但 是 它们 却 使 文档 的 结构 更 加 清晰 。 除 此 之 外 ， 还 有 一 个 更 重要 的 意义 ， 即 方便 使 用 CSS 
样式 对 表格 的 各 个 部 分 进行 修饰 ， 从 而 制作 出 更 炫 的 表格 。 
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在 网 页 中 表单 的 作用 比较 重要 ， 主 要 是 负责 采集 浏览 者 的 相关 数据 ， 例 如 常见 的 注册 表 、 
调查 表 和 留言 表 等 。 在 HIML5 中 ， 表 单 拥有 多 个 新 的 表单 输入 类 型 。 这 些 新 特性 提供 了 更 好 
的 输入 控制 和 验证 。 本 章 主要 讲述 表单 的 概述 、 表 单 的 基本 元 素 的 使 用 方法 和 表单 的 高 级 元 素 
的 使 用 方法 ， 最 后 通过 一 个 综合 案例 ， 进 一 步 讲 述 表 单 的 综合 实用 技巧 。 


5.1 表单 概述 


表单 主要 用 于 收集 网 页 上 浏览 者 的 相关 信息 。 其 标记 为 <form></form>。 表 单 的 基本 语法 
格式 如 下 : 


<form action="url" method="get|post" enctype="mime"></form> 


其 中 , action 指定 处 理 提交 表单 的 格式 , 它 可 以 是 一 个 URL 地 址 或 一 个 电子 邮件 地 址 ; method 
指明 提交 表单 的 HTTP 方法 。enctype 指明 用 来 把 表单 提交 给 服务 器 时 的 互联 网 媒体 形式 。 
表单 是 一 个 能 够 包含 表单 元 素 的 区 域 ， 添 加 不 同 的 表单 元 素 将 显示 不 同 的 效果 。 


【 例 5.1】〔 实 例文 件 ， ch05\5.1.html) 


<!DOCTYPE html> 

<html> 

<body> 

<form> 

下 面 输入 用 户 登 录 信 息 <br /> 

用 户 名 称 

<input type="text" name="user"><br /> 
用 户 密码 

<input type="password" name="password"><br /> 
<input type="submit" value=" 登 录 "> 
</form> 

</body> 

</html> 


在 正 11.0 中 的 浏览 效果 如 图 5-1 所 示 ， 显 示 用 户 登 录 信息 页 面 。 
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= [al x 
lI 司 ”D'\ 本 书 滨 f 码 code\ 国 ~ 叫 | 接 实 
|@ Dcode\Rt.. x | 
富 当下 E 度 -下 , 你 0 首 
下 面 输入 用 户 登录 信息 
用 户 名 称 
用 户 密码 
登录 


图 5-1 用 户 登 录 页 面 


5.2 ”表单 基本 元 素 的 使 用 


表单 元 素 是 能 够 让 用 户 在 表单 中 输入 信息 的 元 素 ， 常 见 的 有 文本 框 、 密 码 框 、 下 拉 菜 单 、 
单 选 框 、 复 选 框 等 。 本 节 主 要 讲述 表单 基本 元 素 的 使 用 方法 和 技巧 。 


5.2.1 单行 文本 输入 框 text 


文本 框 是 一 种 让 访问 者 自行 输入 内 容 的 表单 对 象 ， 通 常 被 用 来 填写 单个 字 或 者 简短 的 回 
答 ， 如 用 户 姓 名 和 地 址 。 代 码 格式 如 下 : 


<input type="text" name="..." size="..." maxlength="..." value="..."> 


其 中 ，type="text" 定 义 单行 文本 输入 框 ; name 属性 定义 文本 框 的 名 称 ， 要 保证 数据 的 准确 
采集 ， 必 须 定 义 一 个 独一无二 的 名 称 ，size 属性 定义 文本 框 的 宽度 ， 单 位 是 单个 字符 宽度 ; 
maxlength 属性 定义 最 多 输入 的 字符 数 ; value 属性 定义 文本 框 的 初始 值 。 


【 例 5.2】 实例 文件 : ch05\5.2.html) 


<!DOCTYPE html> 

<html> 

<head><title> 输 入 用 户 的 姓名 </title></head> 

<body> 

<form> 

请 输入 您 的 姓名 : 

<input type="text" name="yourname" size="20" maxlength="15"><br /> 
请 输入 您 的 地 址 : 

<input type="text" name="youradr" size="20" maxlength="15"> 
</form> 

</body> 

</html> 


在 正 11.0 中 的 浏览 效果 如 图 5-2 所 示 ， 显 示 两 个 单行 文本 输入 框 。 
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= 口 x 
装 _D:\ 本 书 源 代码 \code 汪 图 ”| 搜索 . 


图 5-2 单行 文本 输入 框 


5.2.2 ”多 行文 本 框 标记 <textarea> 
多 行文 本 框 标记 <textarea> 主 要 用 于 输入 较 长 的 文本 信息 ， 代 码 格式 如 下 : 
<textarea name="..." COlS="..." rOWS="..." Wrap="..."></textarea > 


其 中 ，name 属性 定义 多 行文 本 框 的 名 称 ， 要 保证 数据 的 准确 采集 ， 必 须 定义 一 个 独 一 无 
二 的 名 称 ; cols 属性 定义 多 行文 本 框 的 宽度 ， 单 位 是 单个 字符 宽度 ; rows 属性 定义 多 行文 本 框 
的 高 度 ， 单 位 是 单个 字符 高 度 ， wrap 属性 定义 输入 内 容 大 于 文本 域 时 显示 的 方式 。 


【 例 53】 《实例 文件 : ch05\5.3.html) 


<!DOCTYPE html> 

<html> 
<head><title> 多 行文 本 输入 </title></head> 
<body> 

<form> 

请 输入 您 最 新 的 工作 情况 <br /> 

<textarea name="yourworks" cols="50" rows="5"></textarea> 
<br /> 

<input type="submit" value=" 提 交 "> 
</form> 

</body> 

</html> 


在 正 11.0 中 的 浏览 效果 如 图 5-3 所 示 ， 显 示 多 行文 本 框 。 


x 


外 DA\ 本 书 短 代 码 \code\# 轿 忆 按 索 … 
(8 多 wa 入 “加 

请 百度 一 下 , 你 知道 

请 输入 您 最 新 的 工作 情况 


图 5-3 多 行文 本 框 
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5.2.3 ”密码 输入 框 password 


密码 输入 框 是 一 种 特殊 的 文本 域 , 主要 用 于 输入 一 些 保密 信息 。 当 网 页 浏览 者 输入 文本 时 ， 
显示 的 是 黑 点 或 者 其 他 符号 ， 这 样 就 增加 了 输入 文本 的 安全 性 ， 代 码 格式 如 下 : 


<input type="password" name="..." size="..." maxlength="..."> 


其 中 ，type="password" 定 义 密码 框 ， name 属性 定义 密码 框 的 名 称 ， 要 保证 唯一 性 ; size 
属性 定义 密码 框 的 宽度 ， 单 位 是 单个 字符 宽度 ; maxlength 属性 定义 最 多 输入 的 字符 数 。 


【 例 5.4】 《实例 文件 : ch05\5.4.html) 


<!DOCTYPE html> 

<html> 

<head><title> 输 入 用 户 姓 名 和 密码 </title></head> 
<body> 

<form > 

用 户 姓 名 : 

<input type="text" name="yourname"> 

<br /> 

登录 密码 : 

<input type="password" name="yourpw"><br /> 
</form> 

</body> 

</html> 


在 正 11.0 中 的 浏览 效果 如 图 5-4 所 示 ， 输 入 用 户 名 和 密码 时 可 以 看 到 密码 以 黑 点 的 形式 
显示 。 


- 0O x 
相 “D:\ 本 书 源 代 码 Kcode\ 六 国 ~ 中 搜索. 
大 输入 用 户 姓名 和 客 码 xj 
请 全 百 放下， 你 8 和 逢 
用 户 姓名 : |tianyi 
登录 密码 : |eeeeeeeeeeeee| 一 
图 5-4 密码 输入 框 


5.2.4 ” 单 选 按钮 radio 
单 选 按钮 主要 是 让 网 页 浏览 者 在 一 组 选项 里 只 能 选 一 个 ， 代 码 格式 如 下 : 


<input type="radio" name="..." Value = "..."> 
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其 中 ，type="radio" 定 义 单 选 按钮 ，name 属性 定义 单 选 按 钮 的 名 称 ， 单 选 按钮 都 是 以 组 为 
单位 使 用 的 ， 在 同一 组 中 的 单 选项 都 必须 用 同一 个 名 称 ，value 属性 定义 单 选 按钮 的 值 ， 在 同 
一 组 中 它们 的 值 必须 是 不 同 的 。 


【 例 5.5】 实例 文件 ，ch05\5.5.html) 


<!DOCTYPE html> 
<html> 


<head><title> 选 择 感 兴趣 的 图 书 </title></head> 
<body> 

<form > 

请 选择 您 感 兴趣 的 图 书 类 型 : 

br x 


<input type="radio" name="book" value="Bookl"> 网 站 编程 <br /> 
<input type="radio" name="book" value="Book2"> 办 公 软 件 <br /> 
<input type="radio" name="book" value="Book3"> 设 计 软 件 <br /> 
<input type="radio" name="book" value="Book4"> 网 络 管理 <br /> 
<input type="radio" name="book" value="Book5"> 黑 客 攻防 <br /> 
</form> 
</body> 
</html> 


在 正 11.0 中 的 浏览 效果 如 图 5-5 所 示 ， 有 5 个 单 选 按钮 ， 用 户 只 能 同时 选中 其 中 一 个 单 
选 按钮 。 


- 0O x 
着 ”DA 本 书 源 代 码 \code 谤 图 ~- 他 搜索. 

局 选择 感 兴趣 的 图 书 x 

次 当 百 度 一 下 ， 你 额 知道 

请 选 兴趣 的 图 书 类 型 ; 

〇 网 站 编程 


〇 办 公 软 件 
) 设计 软件 
人 @ 网 络 管理 
〇 黑客 攻防 


图 5-5 单 选 按钮 


5.2.5” 复 选 框 checkbox 


复 选 框 主要 是 让 网 页 浏览 者 在 一 组 选项 里 可 以 同时 选择 多 个 选项 。 每 个 复 选 框 都 是 一 个 独 
立 的 元 素 ， 都 必须 有 一 个 唯一 的 名 称 ， 代 码 格式 如 下 : 


<input type="checkbox" name="." Value ="."> 
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其 中 ，type="checkbox" 定 义 复 选 框 ;name 属性 定义 复 选 框 的 名 称 ， 在 同一 组 中 的 复 选 杠 
都 必须 用 同一 个 名 称 ; value 属性 定义 复 选 框 的 值 。 


【 例 5.6】 实例 文件 : ch05\5.6.html) 


<!DOCTYPE html> 


<html> 
<head><tit1le> 选 择 感 兴趣 的 图 书 </title></head> 
<body> 

<form > 


请 选择 您 感 兴趣 的 图 书 类 型 : <br /> 

<input type="checkbox" name="book" value="Book1l"> 网 站 编程 <cbr /> 

<input type="checkbox" name="book" value="Book2"> 办 公 软 件 <br /> 

<input type="checkbox" name="book" value="Book3"> 设 计 软 件 <br /> 

<input type="checkbox" name="book" value="Book4"> 网 络 管理 <br /> 

<input type="checkbox" name="book" value="Book5" checked> 黑 客 攻防 <br /> 
</form> 

</body> 

</html> 


| checked 属性 主要 用 来 设置 默认 选中 项 。 
枝 巧 提示 


在 正 11.0 中 的 浏览 效果 如 图 5-6 所 示 ， 其 中 有 5 个 复 选 框 ， 其 中 【黑客 攻防 】 复 选 框 被 默认 
选中 。 


后 x 
名 “DA 不 书 深 f 友 vode\2 国 ”搜索 
| 局 光大 电光 关 的 图 书 x 若 
音 冯 到 一 下 , 你 部 和 0 道 


趣 的 图 书 类 型 : 


回 黑客 攻防 


图 5-6 复 选 框 的 效果 


5.2.6 ”选择 列表 标记 <select> 


选择 列表 主要 用 于 在 有 限 的 空间 里 设置 多 个 选项 ， 既 可 以 用 作 单 选 ， 也 可 以 用 作 多 选 ， 代 
码 格式 如 下 : 


<select name="..." size="..." multiple> 
<option value="..." selected> 
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</option> 

ee 

其 中 ，name 属性 定义 选择 列表 的 名 称 ，size 属性 定义 选择 列表 的 行 数 ，multiple 属性 表示 可 以 
多 选 ， 如 果 不 设置 该 属性 ， 就 只 能 单 选 ，value 属性 定义 选择 项 的 值 ，selected 属性 表示 默认 已 经 选择 
本 选项 。 


【 例 5.7】 实例 文件 : ch05\5.7.html) 


<!DOCTYPE html> 


<html> 
<head><title> 选 择 感 兴趣 的 图 书 </title></head> 
<body> 
<form> 


请 选择 您 感 兴趣 的 图 书 类 型 : <br /> 
<select name="fruit" size="3" multiple> 
<option value="Book1"> 网 站 编程 
<option value="Book2"> 办 公 软 件 
<option value="Book3"> 设 计 软 件 
<option value="Book4"> 网 络 管理 
<option value="Book5"> 黑 客 攻 防 
</select> 

</form> 

</body> 

</html> 


在 下 11.0 中 的 浏览 效果 如 图 5-7 所 示 ， 在 选择 列表 框 内 显示 为 3 行 选项 ， 用 户 可 以 按 住 
Cl 键 选择 多 个 选项 。 


a 
他 D:\ 本 书 源 代码 \code 详 图 ~ 中， 搜索. 
局 选择 感 兴起 的 图 书 xj 
请 当 百 度 一 下 ,你 就 知道 
请 选择 您 感 兴趣 的 图 书 类 型 
A 


六 计 软件 MY 


图 5-7 选择 列表 的 效果 


5.2.7 普通 按钮 button 
普通 按钮 用 来 控制 其 他 定义 了 脚本 的 处 理工 作 ， 代 码 格式 如 下 : 
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<input type="button" name="..." value="..." onclick="..."> 


其 中 ，type="button" 定 义 普通 按钮 ，name 属性 定义 普通 按钮 的 名 称 ，value 属性 定义 按钮 
的 显示 文字 ; onclick 属性 表示 单 击 行为 ， 也 可 以 通过 指定 脚本 函数 来 定义 按钮 的 行为 。 


【 例 5.8】 实例 文件 : ch05\5.8.html) 


<!DOCTYPE html> 

<html> 

<body> 

<form> 

单 击 下 面 的 按钮 ， 把 文本 框 1 的 内 容 复 制 到 文本 框 2 中 : 
<br/> 

文本 框 1: <input type="text" id="fieldl" value=" 学 习 HTML5 的 技巧 "> 
<br/> 

文本 框 2: <input type="text" id="field2"> 
<br/> 

<input type="button" name=". . ."” value=" 单 击 我 " 


onclick="document .getElementById('field2') .value=document .getElementById('f 
ield1') .value"> 


</form> 
</body> 
</html> 


在 正 11.0 中 的 浏览 效果 如 图 5-8 所 示 ， 单 击 【 单 击 我 】 按 钮 ， 即 可 实现 将 文本 框 1 中 的 
内 容 复 制 到 文本 框 2 中 。 


- ODO x 

蚀 D:\ 本 书 源 代码 \code 这 畦 ~ 咱 搜索 
并 ”D:\ 二 书 源 代码 vcode\ 源 代 … x | 
请 各 百 度 一 下 ， 价 B 知 首 


单 击 下 面 的 按钮 ， 把 文本 框 1 的 内 容 复 制 到 文本 框 2 
中 ; 


文本 框 1: 学 习 HTML5 的 技巧 
文本 框 2: | 学 习 HIML5 的 技巧 


图 5-8 单 击 按钮 后 的 复制 效果 


5.2.8 提交 按钮 submit 
提交 按钮 用 来 将 输入 的 信息 提交 到 服务 器 ， 代 码 格式 如 下 : 


<input type="submit" name="..." value="..."> 


其 中 ，type="submit" 定 义 提交 按钮 ，name 属性 定义 提交 按钮 的 名 称 ; value 属性 定义 按钮 
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的 显示 文字 。 通 过 提交 按钮 可 以 将 表单 里 的 信息 提交 给 表单 里 action 所 指向 的 文件 。 


【 例 5.9】 实例 文件 : ch05\5.9.html) 


<!DOCTYPE html> 

<html> 
<head><title> 输 入 用 户 名 信息 </title></head> 
<body> 

<form action="http://www.yinhangit.com/yonghu.asp" method="get"> 
请 输入 您 的 姓名 : 

<input type="text" name="yourname"> 
<br /> 

请 输入 您 的 住址 : 

<input type="text" name="youradr"> 
<br /> 

请 输入 您 的 单位 : 

<input type="text" name="yourcom"> 
es 

请 输入 您 的 联系 方式 : 

<input type="text" name="yourcom"> 
<br /> 

<input type="submit" value=" 提 交 "> 
</form> 

</body> 

</html> 


在 正 11.0 中 的 浏览 效果 如 图 5-9 所 示 ， 输 入 内 容 后 单 击 【 提 交 】 按 钮 ， 即 可 将 表单 中 的 
数据 提交 到 指定 的 服务 器 中 。 


丰产 


汪 DA 本 书 涛 代码 Wode 汪 著作 控 示 
局 输入 用 户 名 信息 * 回 


图 5-9 提交 按钮 


5.2.9 重 置 按钮 reset 
重 置 按钮 用 来 清空 表单 中 输入 的 信息 ， 代 码 格式 如 下 : 


<input type="reset" name="..." value="..."> 


其 中 ，type="reset" 定 义 重 置 按钮 ，name 属性 定义 重 置 按钮 的 名 称 ; value 属性 定义 按钮 的 
显示 文字 。 
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【 例 5.10】 实 例文 件 ，ch05\5.10.html) 


<!DOCTYPE html> 

<html> 

<body> 

<form> 

请 输入 用 户 名 称 : 

<input type="text"> 

<br/> 

请 输入 用 户 密码 : 

<input type="password"> 

<br /> 

<input type="submit" value=" 登 录 "> 
<input type="reset" value=" 重 置 "> 
</form> 

</body> 

</html> 


在 正 11.0 中 的 浏览 效果 如 图 5-10 所 示 ， 输 入 内 容 后 单 击 【 重 置 】 按 钮 ， 即 可 实现 将 表单 
中 的 数据 清空 的 目的 。 


日 Xx 
可“D'\ 林 书 源 f 权 Node 国 ”搜索 - 

忆 D'\ 本 书 最 fcode\ 抒 代 .， 

请 Sa 下, frmenn 


请 输入 用 户 名 称 : 
请 输入 用 户 密码 : | 
孙 | | 重重 


图 5-10 重 置 按钮 


5.3 ”表单 高 级 元 素 的 使 用 
除了 上 述 基 本 属性 外 , HTMLS5 中 还 有 一 些 高 级 属性 , 包括 url、email、 time、range、search 
等 。 对 于 部 分 高 级 属性 ，IE 11.0 浏览 器 暂时 还 不 支持 ， 下 面 将 用 Opera 11.60 浏览 器 查看 效果 。 
5.3.1 url 属 性 
url 属性 用 于 说 明 网 站 网 址 ， 显 示 为 在 一 个 文本 框 中 输入 URL 地 址 。 在 提交 表单 时 会 自动 
验证 url 的 值 ， 代 码 格 式 如 下 : 


<input type="url" name="userurl"/> 


另外 , 用 户 可 以 使 用 普通 属性 设置 url 输入 框 , 例如 可 以 使 用 max 属性 设置 其 最 大 值 、 min 
属性 设置 其 最 小 值 、step 属性 设置 合法 的 数字 间隔 、 利 用 value 属性 规定 其 默认 值 。 对 于 另外 
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的 高 级 属性 中 同样 的 设置 不 再 重复 讲述 。 


【 例 5.11】 实例 文件 : ch05\5.11.html) 


<!DOCTYPE html> 

<html> 

<body> 

<form> 

<br/> 

请 输入 网 址 : 

<input type="url" name="userurl"/> 
</form> 

</body> 

</html> 


在 正 11.0 中 的 浏览 效果 如 图 5-11 所 示 。 用 户 可 在 文本 框 中 输入 相应 的 网 址 。 如 果 输 入 的 
URL 格式 不 准确 ， 按 【Enter】 键 ， 就 会 弹出 提示 信息 。 
局 fileV//D,/ 丰 忆 尖 KE/c 时 已 下 


| DESIgcodeWRie. > 下 
育 名 二 下 , 四 yin 


你 必须 输入 有 效 LRL 


图 5-11 nurl 属性 的 效果 


5.3.2 email 属性 


与 url 属性 类 似 ,email 属性 用 于 让 浏览 者 输入 E-mail 地 址 。 在 提交 表单 时 会 自动 验证 email 
域 的 值 ， 代 码 格式 如 下 : 


<input type="email" name="user email"/> 


【 例 5.12】 实例 文件 : ch05\5.12.html) 


<!DOCTYPE html> 

<html> 

<body> 

<form> 

<br/> 

请 输入 您 的 邮箱 地 址 : 

<input type="email" name="user email"/> 
<br /> 

<input type="submit" value=" 提 交 "> 
</form> 
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</body> 
</html> 


在 正 11.0 中 的 浏览 效果 如 图 5-12 所 示 。 用 户 可 在 文本 框 中 输入 相应 的 邮箱 地 址 。 如 果 用 
户 输入 的 邮箱 地 址 不 合法 ， 单 击 【 提 交 】 按 钮 后 会 弹出 提示 信息 。 
各 D:\ 夺 书 深 代 码 odeW 轩 -人 0 Ee- ~ 


| 总 Dw 书 源 ft 码 \code\ 沐 代 x | 了 
请 当下 , fr 


请 输入 您 的 邮箱 地 址 ; 


提交 


|， 必须 输入 有 效 电子 邮件 地 址 


图 5-12 email 属性 的 效果 


5.3.3 date 和 times 属性 


HTMLS 新 增 了 一 些 日 期 和 时 间 输 入 类 型 , 其 中 包括 date、datetime、datetime-local、 month、 
week 和 time， 具 体 含义 如 表 5-1 所 示 。 


表 5-1 日 期 和 时 间 输 入 类 型 
| 性 | 
[ae | 
[nnn | 


datetime-local 选取 时 间 、 日 、 月 、 年 (本 地 时 间 ) 


上 述 属 性 的 代码 格式 类 似 ， 例 如 以 date 属性 为 例 ， 代 码 格 式 如 下 : 


<input type="date" name="user date" /> 


【 例 5.13】 实例 文件 : ch05\5.13.html) 


<!DOCTYPE html> 

<html> 

<body> 

<form> 

<br/> 

请 选择 购买 商品 的 日 期 : 

be 

<input type="date" name="user date"/> 
</form> 
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</body> 
</html> 


在 Opera 55.2 中 的 浏览 效果 如 图 5-13 所 示 。 用 户 单 击 输入 框 中 的 下 三 角 按钮 ， 即 可 在 弹 
出 的 窗口 中 选择 需要 的 日 期 。 


S13html x Ne 
CC。 图 个 。filey//D/ 本 书 源 代 /code/ 尖 人 于/ch0 
请 选择 购买 商品 的 日 期 


2018 年 09 月 


局- 旺旺 由 古 炭 则 

和 
3 4 5 6 7 8 9 
0 1 [到 1 094 Re 
7 09 20 2 2 人 23 
24 25 2 2 2 3 0 


图 5-13 date 属性 的 效果 


5.3.4 number 属性 


number 属性 提供 了 一 个 输入 数字 的 输入 类 型 。 用 户 可 以 直接 输入 数字 或 者 通过 单 击 微调 
框 中 的 按钮 选择 数字 ， 代 码 格式 如 下 : 


<input type="number" name="shuzi" /> 


【 例 5.14】〔 实 例文 件 : ch05\5.14.html) 


<!DOCTYPE html> 

<html> 

<body> 

<form> 

<br/> 

此 网 站 我 曾经 来 

<input type="number" name="shuzi"/> 次 了 哦 ! 
</form> 

</body> 

</html> 


在 Opera 11.0 中 的 浏览 效果 如 图 5-14 所 示 。 用 户 可 以 直接 输入 数字 ， 也 可 以 单 击 微调 按 
钮 选择 合适 的 数字 。 
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tml x | | 
CGC 田 “ 户 fileVW/DY 本 书 源 代码 /code/ 到 代 码 /ch0 
i 


-| 图 5-14 number 属性 的 效果 
强烈 建议 用 户 使 用 min 和 max 属性 规定 输入 的 最 小 值 和 最 大 值 。 
技巧 提示 


5.3.5 range 属性 


range 属性 可 以 显示 一 个 滚动 的 控件 。 和 number 属性 一 样 , 用 户 可 以 使 用 max、min 和 step 
属性 设置 控件 的 范围 ， 代 码 格式 如 下 : 


<input type="range" name="" min="" max="" /> 
其 中 ，min 和 max 属性 分 别 控制 滚动 控件 的 最 小 值 和 最 大 值 。 


【 例 5.15】 实例 文件 : ch05\5.15.html) 


<!DOCTYPE html> 

<html> 

<body> 

<form> 

<br/> 

英语 成 绩 公布 了 ! 我 的 成 绩 名 次 为 : 

<input type="range" name="ran" min="]1" max="10"/> 
</form> 

</body> 

</html> 


在 正 11.0 中 的 浏览 效果 如 图 5-15 所 示 。 用 户 可 以 拖 忠 滑 块 选择 合适 的 数字 。 


-oO x 
| ET 万 = 

| 二 byFARHKWVvodevptt x 

高 旬 B- 下 Ga 


英语 成 


公布 了 ! 我 的 成 绩 名 次 为 。 TIR 


图 $-15 range 属性 的 效果 


默认 情况 下 ， 滑 块 位 于 裳 珠 的 中 间 位 置 。 如果 用 户 指定 的 最 大 值 小 于 最 小 值 ， 就 多 
EE 和 许 使 用 反 向 滚动 币 ， 目 前 浏览 器 对 这 一 属性 还 不 能 很 好 地 支持 。 
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5.3.6 required 属性 


required 属性 规定 必须 在 提交 之 前 填写 输入 域 不 能 为 空 ) 。required 属性 适用 于 以 下 类 型 的 
输入 属性 : text，search，url，email，password，date，Ppickers，number，checkbox 和 radio 等 。 


【 例 5.16】 实例 文件 : ch05\5.16.html) 


<!DOCTYPE html> 

<html> 

<body> 

<form> 

下 面 输入 用 户 登 录 信 息 

Sr 

用 户 名 称 

<input type="text" name="user" required="required"> 
<br /> 

用 户 密码 

<input type="password" name="password" required="required"> 
<br /> 

<input type="submit" value=" 登 录 "> 

</form> 

</body> 

</html> 


在 Opera 11.0 中 的 浏览 效果 如 图 5-16 所 示 。 如 果 用 户 只 输入 密码 就 单 击 【 登 录 】 按 钮 ， 
就 会 弹出 提示 信息 。 
二 ju x 
关 D:\ 本 书 源 代码 \code 详 鲁 ~ 搜索 .. 


| 介 px 本 书 源 代 码 code 源 fx | 下 
音 当 百 度 一 下 , 你 六 X01 道 


下 面 输入 用 户 登录 信息 
用 户 密友 


登录 | | 这 是 必 填 字 段 


图 5-16 _ required 属性 的 效果 


5.4 综合 实例 一 一 创建 用 户 反馈 表单 


本 实例 将 结合 使 用 一 个 表单 内 的 各 种 元 素来 开发 一 个 简单 网 站 的 用 户 意见 反馈 页 面 , 具体 
操作 步骤 如 下 : 


L@ 国 分 析 需 求 。 反 馈 表 单 非常 简单 ， 通 常 包含 三 个 部 分 : 在 页 面 上 方 给 出 标题 ， 标 题 下 方 
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是 正文 部 分 (表单 元 素 ) ， 最 下 方 是 表单 元 素 提交 按钮 。 在 设计 页 面 时 ， 需 要 把 “用 户 注册 ” 
标题 设置 成 hl 大 小 ， 正 文 使 用 <p> 标 记 来 限制 表单 元 素 。 
L 加 构建 HTML 页 面 ， 实 现 表单 内 容 。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 用 户 反 馈 页 面 </title> 

</head> 

<body> 

<hl align=center> 用 户 反 馈 表 单 </h1> 

<form method="post"> 

<p> 姓 gnbsp; gnbsp; gnbsp; gnbsp; 名 : 

<input type="text" class=txt size="12" maxlength="20" name="username"/> 
</p><p> 性 gnbsp; gnbsp; gnbsp; gnbsp; 别 : 
<input type="radio" value="male"/> 男 
<input type="radio" value="female"/> 女 
</p><p> 年 enbsp; gnbsp; &gnbsp; gnbsp; 龄 
<input type="text" class=txt name="age"/> 


</p> 

<p> 联 系 电话 

<input type="text" class=txt name="tel"/> 
</p><p> 电 子 邮 件 : 

<input type="text" class=txt name="email"/> 
</p><p> 联 系 地 址 : 

<input type="text" class=txt name="address"/> 
</p> 

<p> 


请 输入 您 对 网 站 的 建议 <br /> 

<textarea name="yourworks" cols="50" rows="5"></textarea> 
<br /> 

<input type="submit" name="submit" value=" 提 交 "/> 

<input type="reset" name="reset" value=" 清 除 "/> 

</p> 

</form> 

</body> 

</html> 


在 正 11.0 中 的 浏览 效果 如 图 5-17 所 示 。 此 时 即 可 完成 用 户 反馈 表单 的 创 寻 


ft 
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BB 
Doded @ ~ O|| WA D1"| 
EL < 无 
高 名- 下, Ga 
用 户 反馈 表单 
狂 [| 


性 别 : O 男 O 女 
年 疮 。 
联系 电话 [ 
电子 邮件 [ |] 


联系 地 址 : 


请 输入 您 对 网 站 的 建议 


图 5-17 用 户 反馈 页 面 


5.5 专家 解 惑 


1. 如 何在 表单 中 实现 文件 上 传 框 ? 

在 HTML5 语言 中 ,使 用 file 属性 实现 文件 上 传 框 .语法 格式 为 : <input type="file" name=" 
size="..." maxlength="...">。 其 中 ，type="file" 定 义 为 文件 上 传 框 ; name 属性 为 文件 上 传 框 的 名 
称 ; size 属性 定义 文件 上 传 框 的 宽度 ,单位 是 单个 字符 宽度 ; maxlength 属性 定义 最 多 输入 的 字 
符 数 。 文 件 上 传 框 的 显示 效果 如 图 5-18 所 示 。 


= 六， 汪 
站 D:\ 本 书 源 代码 codeWj 图 -0 

屋 DA 本 书 源 代 码 \codeN 原 代 .. x | 下 

请 洛 百 度 - 下 ， 人 Si0 道 


列 砚 一 | 


图 5-18 文件 上 传 框 


2. 制作 的 单 选 按钮 为 什么 可 以 同时 选中 多 个 ? 


此 时 用 户 需要 检查 单 选 按钮 的 名 称 ， 保 证 同一 组 中 的 单 选 按钮 名 称 必须 相同 ， 这 样 才能 
证 单 选 按钮 只 能 同时 选中 其 中 一 个 。 
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一 个 美观 大 方 简约 的 页 面 以 及 高 访问 量 的 网 站 是 网 页 设计 者 的 追求 ， 然 而 仅 通过 HTML5 
实现 是 非常 困难 的 。HTML 语言 仅仅 定义 了 网 页 结构 ， 对 于 文本 样式 没有 过 多 涉及 。 这 就 需要 
一 种 技术 对 页 面 布 局 、 字 体 、 颜 色 、 背 景 和 其 他 图 文 效果 的 实现 提供 更 加 精确 的 控制 ， 这 种 技 
术 就 是 CSS。 


6.1 CSS3 介绍 


使 用 CSS3 最 大 的 优势 是 ， 在 后 期 维护 中 如 果 需 要 修改 一 些 外 观 样式 ， 只 需要 修改 相应 的 
代码 即 可 。 


6.1.1 CSS3 功能 


随 着 Intemet 不 断 发 展 ， 对 页 面 效果 诉求 越 来 越 强烈 ， 只 依赖 HTML 这 种 结构 化 标记 来 实 
现 样式 已 经 不 能 满足 网 页 设计 者 的 需要 ， 其 表现 有 以 下 几 个 方面 : 


(1) 维护 困难 。 为 了 修改 某 个 特殊 标记 格式 ， 需要 花费 很 多 时 间 ， 尤 其 对 整个 网 站 而 言 ， 
后 期 修改 和 维护 成 本 较 高 。 

(2) 标记 不 足 。HTML 本 身 标 记 并 不 是 很 多 ， 而 且 很 多 标记 都 是 为 网 页 内 容 服 务 ， 关 于 
内 容 样式 的 标记 如 文字 间距 、 上 段落 缩 进 ) 很 难 在 HTML 中 找到 。 

(3) 网 页 过 于 腔 肿 。 由 于 没有 统一 对 各 种 风格 样式 进行 控制 HTML 页 面 往往 体积 过 大 ， 
占 掉 很 多 宝贵 的 宽度 。 

(4) 定位 困难 。 在 整体 布局 页 面 时 ，HTML 对 于 各 个 模块 的 位 置 调整 显得 捉襟见肘 ， 过 
多 的 <table> 标 记 将 会 导致 页 面 的 复杂 和 后 期 维护 的 困难 。 


在 这 种 情况 下 ， 就 需要 寻找 一 种 可 以 将 结构 化 标记 与 丰富 的 页 面 表 现 相 结合 的 技术 。CSS 
样式 技术 恰恰 迎合 了 这 种 需要 。 
CSS (Cascading Style Sheet) 称 为 层 倒 样式 表 ， 也 可 以 称 为 CSS 样式 表 或 样式 表 ， 其 文件 
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扩展 名 为 .css。CSS 是 用 于 增强 或 控制 网 页 样式 并 人 允许 将 样式 信息 与 网 页 内 容 分 离 的 一 种 标记 
性 语言 。 

引用 样式 表 的 目的 是 将 “网 页 结构 代码 ”和 “网 页 样式 风格 代码 ”分 离开 ， 从 而 使 网 页 设 
计 者 可 以 对 网 页 布局 进行 更 多 的 控制 。 利用 样式 表 可 以 将 整个 站 点 上 所 有 网 页 都 指向 某 个 CSS 
文件 ， 设 计 者 只 需要 修改 CSS 文件 中 的 某 一 行 ， 整 个 网 页 上 对 应 的 样式 会 随 之 发 生 改 变 。 


6.1.2 CSS3 发 展 历史 


万 维 网 联盟 (W3C) 在 1996 年 制定 并 发 布 了 一 个 网 页 排版 样式 标准 ( 层 肢 样式 表 ) ， 用 
来 对 HTML 有 限 的 表现 功能 进行 补充 。 

随 着 CSS 的 广泛 应 用 ，CSS 技术 越 来 越 成 熟 。CSS 现在 有 三 个 不 同 层次 的 标准 : CSS1、 
CSS2 和 CSS3。 

CSS1 (CSS Level 1) 是 CSS 的 第 一 层次 标准 ， 正 式 发 布 于 1996 年 12 月 17 日 ， 后 来 于 
1999 年 1 月 11 日 进行 了 修改 。 该 标准 提供 简单 的 样式 表 机 制 ， 使 网 页 的 设计 者 可 以 通过 附属 
样式 对 HTML 文档 的 表现 进行 描述 。 

CSS2 (CSS Level 2) 于 1998 年 5 月 12 日 被 正式 作为 标准 发 布 。CSS2 标准 是 基于 CSS1 
设计 的 ， 其 包含 了 CSS1 所 有 的 功能 ， 并 扩充 和 改进 了 很 多 更 加 强大 的 属性 。CSS2 支持 多 媒体 
样式 表 ， 使 得 设计 者 可 以 根据 不 同 的 输出 设备 给 文档 制定 不 同 的 表现 形式 。 

在 2001 年 5 月 23 日 , W3C 完成 了 CSS3 的 工作 草案 ,该 草案 制订 了 CSS3 的 发 展 路 线 图 ， 
详细 列 出 了 所 有 模块 ， 并 计划 在 未 来 进行 逐步 规范 。 

CSS1 主要 定义 了 网 页 的 基本 属性 ， 如 字体 、 颜 色 、 空 白 边 等 。CSS2 在 此 基础 上 添加 了 一 
些 高 级 功能 〈 如 浮动 和 定位 ) ， 以 及 一 些 高 级 的 选择 器 〈 如 子 选 择 器 、 相 邻 选 择 器 和 通用 选择 
器 等 ) 。CSS3 开始 遵循 模块 化 开发 ， 标 准 被 分 为 若干 个 相互 独立 的 模块 ， 这 将 有 助 于 理 清 模 
块 化 规范 之 间 的 关系 ， 减 小 完整 文件 的 体积 。 


6.1.3 浏览 器 与 CSS3 


CSS3 制定 完成 之 后 具有 了 很 多 新 功能 新 样式 ) ， 但 这 些 新 样式 在 浏览 器 中 不 能 获得 完 
全 支持 ， 主 要 在 于 各 个 浏览 器 对 CSS3 很 多 细节 处 理 上 存在 差异 。 例 如 ， 某 个 标记 属性 在 一 种 
浏览 器 中 支持 而 在 另 一 种 浏览 器 中 不 支持 ， 或 者 两 者 浏览 器 都 支持 但 其 显示 效果 不 一 样 。 

主流 浏览 器 为 了 自己 产品 的 利益 和 推广 ,定义 了 很 多 私有 属性 ， 用 于 加 强 页 面 显示 样式 和 
效果 ， 导 致 现在 每 个 浏览 器 都 存在 大 量 的 私有 属性 。 虽 然 使 用 私有 属性 可 以 快速 构建 效果 ， 但 
是 对 网 页 设计 者 是 一 个 大 麻烦 。 设 计 一 个 页 面 ， 就 需要 考虑 在 不 同 浏览 器 上 的 显示 效果 ， 一 个 
不 注意 就 会 导致 同一 个 页 面 在 不 同 浏览 器 上 显示 效果 不 一 致 ， 甚至 有 的 浏览 器 不 同 版 本 之 间 也 
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具有 不 同 的 属性 。 

如 果 所 有 浏览 器 都 支持 CSS3 样式 ， 那 么 网 页 设计 者 只 需 使 用 一 种 统一 标记 即 可 在 不 同济 
览 器 上 实现 一 致 的 显示 效果 。 

当 CSS3 被 所 有 浏览 器 接受 和 支持 以 后 ， 整 个 网 页 设计 将 会 变 得 非常 容易 。CSS3 标准 使 
得 布局 更 加 合理 ， 样 式 更 加 美观 ， 整 个 Web 页 面 显示 将 会 焕然 一 新 。 虽 然 现在 CSS3 还 没有 完 
全 普及 、 各 个 浏览 器 对 CSS3 的 支持 还 处 于 发 展 阶段 ， 但 是 CSS3 具有 很 高 的 发 展 潜力 ， 在 样 
式 修饰 方面 是 其 他 技术 无 法 蔡 代 的 。 此 时 学 习 CSS3 技术 ， 才 能 保证 技术 不 落伍 。 


6.2 编辑 和 浏览 CSS 


CSS 文件 是 文本 格式 文件 ， 因 此 在 编辑 CSS 时 就 有 了 多 种 选择 ， 可 以 使 用 一 些 简单 的 文 
本 编辑 工具 (如 记事 本 、Word) ， 也 可 以 选择 专业 的 CSS 编辑 工具 (如 Dreamweaver) 。 记 
事 本 编辑 工具 适合 于 初学 者 ， 不 适合 大 项 目 编辑 ， 但 专业 工具 软件 通常 占有 空间 较 大 ， 打 开 不 
太 方 便 。 
6.2.1 CSS 基础 语法 

在 前 面 介绍 过 ，CSS 样式 表 由 若干 条 样式 规则 组 成 ,这 些 样式 规则 可 以 应 用 到 不 同 的 元 素 
或 文档 中 来 定义 它们 的 显示 效果 。 每 一 条 样式 规则 由 三 部 分 构成 : 选择 符 (selector) 、 属 性 
(property) 和 属性 值 (value) ， 基 本 格式 如 下 : 

selector{property: value} 

(1) selector 可 以 采用 多 种 形式 ， 可 以 为 文档 中 的 HTML 标记 (例如 <body>、<table>、 
<p> 等 ) ， 也 可 以 是 XML 文档 中 的 标记 。 

(2) property 是 选择 符 指定 的 标记 所 包含 的 属性 。 

(3) value 指定 了 属性 的 值 。 如 果 定 义 选择 符 的 多 个 属性 ， 则 属性 和 属性 值 为 一 组 ， 组 与 
组 之 间 用 “:;” 隔 开 ， 基 本 格式 如 下 : 

selector{propertyl: valuel; property2: Value27.… } 

下 面 就 给 出 一 条 样式 规则 ， 代 码 如 下 所 示 。 


p{color:red} 


其 中 , p 为 段落 提供 样式 ，color 指定 文字 颜色 属性 ，red 为 属性 值 。 此 样式 规则 表示 标记 
<p> 指 定 的 段落 文字 为 红色 。 
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如 果 要 为 段落 设置 多 种 样式 ， 则 可 以 使 用 下 列 语句 。 
pt{font-family:" 素 书 "; color:red; font-size:40px; font-weight:bold} 


6.2.2 ”使 用 记事 本 手工 编写 CSS 文件 


由 于 CSS 是 文本 格式 ， 因 此 使 用 传统 的 文本 编辑 器 就 可 以 编辑 CSS。 当 然 这 些 编辑 软件 
不 支持 语法 提示 ,不 支持 验证 , 会 严重 影响 开发 效率 , 但 使 用 记事 本 手工 编写 CSS 文件 可 以 使 
初学 者 更 快 地 掌握 CSS3 技术 。 

使 用 记事 本 编写 CSS 和 使 用 记事 本 编写 HTML 的 方法 基本 一 样 。 首 先 需要 打开 一 个 记事 
本 ， 然 后 在 里 面 输入 相应 的 CSS 代码 即 可 。 


【 例 6.1】 使 用 记事 本 手工 编写 CSS 文件 。 

上 @ 则 打开 记事 本 ， 编 写 HTML 文档 
打开 一 个 记事 本 ， 输 入 HTML 代码 ， 如 图 6-1 所 示 。 
人 到 添加 CSS 代码， 修饰 HTML 元 素 


在 head 部 分 添加 CSS 样式 代码 ， 如 图 6-2 所 示 。 


恒 6.1.html -记事 本 = 口 x 和 口 X 
文件 (F) 坊 钼 (Ej 惧 z(C) 查看 (V) 和 视 助 (H) 

CIDOCTYPE html> 站 ”D\ 本 书 源 代码 \code 计 图 -中 搜索. 
‘<html 

[heed 后 记事 本 开发 CSS x 荐 

K 记事 本 开发 titley 收藏 到 

和 这 于 本 jcSSWrirls a i 

kb 


是 一 个 段落 ， 使 用 CSS 修 饰 c/p》 请 党 百度 下， 你 8 知道 


这 是 一 个 段落 ， 使 用 CSS 修 饰 


图 6-1 记事 本 开发 HIML 图 6-2 添加 样式 
从 窗口 中 可 以 看 出 ， 在 head 部 分 添加 了 一 个 <style> 标 记 〈CSS 样式 标记 ) 。 在 <style> 标 
记 中 间 对 p 样式 进行 了 设 定 ， 设 置 段落 居中 显示 并 且 颜 色 为 红色 。 
四 3 运行 网 页 文件 
编辑 完成 后 ， 使 用 IE 11.0 打开 (如 图 6-3 所 示 ) ， 可 以 看 到 段落 在 页 面 中 间 以 红色 字体 显 


示 。 
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- DO x 
| 司 DAYScode 村 ”但 于 
|§ 各 本 HACSS 3 

文 伯 ) 和 (日 吉 看 M 收藏 夫 A) 工具] 者 区 (H) 

译 ER 下 ., frm 


这 是 一 个 段落 ， 使 用 CSS 修 饰 | 


图 6-3 CSS 样式 显示 窗口 


6.2.3 ”使 用 Dreamweaver CC 创建 CSS 文件 


随 着 Web 技术 的 发 展 ， 越 来 越 多 的 开发 人 员 开始 使 用 功能 更 多 、 界 面 更 友好 的 专业 CSS 
编辑 器 (如 Dreamweaver CC 的 CSS 编辑 器 和 Visual Studio 的 CSS 编辑 器 ) ， 这 些 编辑 器 有 语 
法 着 色 ， 带 输入 提示 ， 甚 至 有 自动 创建 CSS 的 功能 。 


【 例 6.2】 使 用 Dreamweaver CC 创建 CSS 文件 
上 创建 HTML 文档 


使 用 Dreamweaver CC 创建 HTML 文档 的 方法 前 面 已 经 介绍 过 ,这 里 就 不 再 闭 述 了 。 此 处 
创建 一 个 名 称 为 “6.2.html” 的 文档 ， 如 图 6-4 所 示 。 


到 添加 CSS 样式 
@@ 在 设计 模式 中 ， 选 中 “使 用 CSS 标记 修饰 ”段落 后 ， 右 击 并 在 弹出 的 快捷 菜单 中 选择 
【CSS 样式 】 关 【新 建 】 菜 单 命令 ， 弹 出 如 图 6-5 所 示 的 对 话 框 。 


62htmlr X 
| 代码 | 拆 分 [设计 | 实时 视图 哆 . 世 . 
使 用 CSS 标 记 修 饰 


选择 党 类 者 
每 签 《重新 定义 ETNL 元 要 》 四 > 


直 插 加 名 称 : 
六 皇 东 油 入 过 皇 加 名 咎 。 


FEED 
所 有 py 元素 。 


TA 于 


规 出 定义: 
十 择 宇 义 规 网 的 位 置 、 
《机 册 二 文本 


E22 


图 6-4 网 页 显示 窗口 图 6-5 “新 建 CSS 规则 ”对 话 框 
人 @ 在 【为 CSS 规则 选择 上 下 文选 择 器 类 型 〗】 下 拉 列 表 中 ， 选 择 【标签 (重新 定义 HTML 
元 素 )〗】 选 项 (学习 后 面 章节 内 容 后 ， 读 者 可 以 根据 需要 选择 不 同 的 选择 器 类 型 )。 选 择 完 成 后 
单 击 【确定 】 按 钮 ， 即 可 显示 如 图 6-6 所 示 的 对 话 框 。 
自在 对 话 框 中 可 以 设置 p 的 样式 ， 设 置 完 成 后 单 击 【确定 】 按 钮 ， 此 时 HIML 文档 内 容 
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发 生 了 变化 ， 如 图 6-7 所 示 。 


3 
代 而 | 拆 分 [设计 | 实时 视图 哆 . 加 邮 


使 用 CSS 标 记 修饰 | 


人 四 2 


图 6-6 “Pp 的 CSS 规则 定义 ”对 话 框 图 6-7 设置 完成 显示 


从 代码 模式 可 以 看 到 ， 在 head 部 分 中 增加 了 一 个 <style> 标 记 放 置 CSS 样式 ， 该 样式 用 来 
修饰 段落 p。 

[0 运行 HTML 文档 

在 正 11.0 中 预览 该 网 页 其 显示 结果 如 图 6-8 所 示 , 可 以 看 到 字体 颜色 设置 为 浅 红色 ,大 
小 为 18px， 字 形 加 粗 。 


名 ”DA 本 书 嗓 K 本 wode 上 国 ” 吕 | 得 示 


|@ RcSSHt “加 
文件 (F) 粮 太 (5) 这 看 (V) 收藏 赤 (A) 工具 (D) 帮助 (H) 


育 ER- 下 ,un 


使 用 CSS 标 记 修饰 


图 6-8 CSS 样式 显示 
上 述 使 用 Dreamweaver 创建 CSS 的 方法 只 是 其 中 一 种 ， 读 者 还 可 以 直接 在 代码 模式 中 编 
写 CSS 代码 ， 此 时 会 有 很 好 的 语法 提示 。 


6.3 在 HTML5 中 使 用 CSS3 的 方法 
CSS 样式 表 能 很 好 地 控制 页 面 显 示 、 分 离 网 页 内 容 和 样式 代码 。 它 控制 HTMLS 页 面 效 果 
的 方式 通常 包括 行内 样式 、 内 嵌 样 式 、 链 接 样 式 和 导入 样式 。 


6.3.1 行内 样式 
行内 样式 是 所 有 样式 中 比较 简单 、 直 观 的 方法 , 它 直 接 把 CSS 代码 添加 到 HTML 文件 
是 作为 HTML 的 标记 属性 存在 的 。 通 过 这 种 方法 ， 可 以 很 简单 地 对 某 个 元 素 单独 定义 样式 。 
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使 用 行内 样式 方法 直接 在 HTML 标记 中 使 用 style 属性 , 该 属性 的 内 容 就 是 CSS 的 属性 和 
值 ， 例 如 : 


<p style="color:red"> 段 落 样式 </p> 


【 例 6.3】 实例 文件 : ch06\6.3.html) 

<!DOCTYPE html> 

<html> 

<head> 

<title> 行 内 样式 </title> 

</head> 

<body> 

<p 
style="color:red;font-size:20px;text-decoration:underline;text-align:center 
"> 此 段落 使 用 行内 样式 修饰 </p> 

<p style="color:blue;font-style:italic"> 正 文 内 容 </p> 

</body> 

</html> 


在 下 11.0 中 的 浏览 效果 如 图 6-9 所 示 ， 可 以 看 到 2 个 p 标记 中 都 使 用 了 style 属性 ， 并 且 
设置 了 CSS 样式 , 各 个 样式 之 间 互 不 影响 , 分 别 显示 自己 的 样式 效果 。 第 一 个 段落 为 红色 字体 ， 
居中 显示 且 带 有 下 画 线 。 第 二 个 段落 为 蓝 色 字体 ， 并 以 斜体 显示 。 


过 口 x 
本 DANEH 量 INodev 因 - OC 提 
|§ 5 二 * 回 
文件 (F) 篇 馈 (E) 一 看 (V) 跑车 夫 (A) 工具 (D) 者 动 (H) 
育 名 ER- 下 , fiona 


i 行 二 人 禾 全 
还 交 认 其 


图 6-9 行内 样式 显示 
尽管 行内 样式 简单 ， 但 这 种 方法 并 不 常用 ， 因 为 这 样 添加 无 法 完全 发 挥 样式 表 “ 内 容 结构 

和 样式 控制 代码 分 离 ”的 优势 ， 而 且 这 种 方式 也 不 利于 样式 的 重用 。 如 果 为 每 一 个 标记 都 设置 

style 属性 ， 那 么 后 期 维护 成 本 会 过 高 ， 网 页 也 容易 过 胖 ， 故 不 推荐 使 用 。 

6.3.2 ”内 榜样 式 


内 嵌 样 式 就 是 将 CSS 样式 代码 添加 到 <head> 与 </head> 之 间 ， 并且 用 <style> 和 </style> 标 记 
进行 声明 。 这 种 写法 虽然 没有 完全 实现 页 面 内 容 和 样式 控制 代码 完全 分 离 ， 但 是 可 以 用 于 设置 
一 些 比较 简单 且 需 要 样式 统一 的 页 面 ， 其 格式 如 下 所 示 。 


<head> 
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<style type="text/css"> 
p{color:red;font-size:12px;} 
</style> 

</head> 


有 些 较 低 版 本 的 浏览 器 不 识别 <style> 标 记 ,不 能 将 样式 正确 地 应 用 到 页 面 显示 上 , 而 是 直 
接 将 标记 中 的 内 容 以 文本 的 形式 显示 。 为 了 解决 此 类 问题 ， 可 以 使 用 HMTL 注释 将 标记 中 的 
内 容 隐藏 。 如 果 浏览 器 能 够 识别 <style> 标 记 , 则 标记 内 被 注释 的 CSS 样式 定义 代码 依旧 能 够 发 
挥 作 用 。 


<head> 

<style type="text/css"> 

el 
p{color:red;font-size:12px;} 
Ee 

</style> 

</head> 


【 例 6.4】“〔 实 例文 件 ，ch06\6.4.html) 


<!DOCTYPE html> 

<html> 

<head> 

<tit1le> 内 其 样式 </title> 

<style type="text/css"> 

p{ 
color:orange; /* 设 置 字体 颜色 为 橙色 */ 
text-align:center; /* 设 置 段 落 居中 显示 */ 
font-weight:bolder;  /* 设 置 字 体 加 粗 效果 */ 
font-size:25px; /* 设 置 字体 大 小 */ 

} 

</style> 

</head><body> 

<p> 此 段落 使 用 内 由 样式 修饰 </p> 

<p> 正 文 内 容 </p> 

</body> 

</html> 


在 正 11.0 中 的 浏览 效果 如 图 6-10 所 示 , 可 以 看 到 2 个 段落 都 被 CSS 样式 修饰 且 样 式 保持 
一 致 ， 均 为 段落 居中 、 加 粗 并 以 橙色 字体 显示 。 
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过 口 x 
| 所 ”DAF 书 大 f 码 Node 辣 国 ” 节 | 近 家- 
| ma 二 < 加 
弃 各 吾 友 一 下 ,你 宁 知 本 


此 段落 使 用 内 谋 样 式 修饰 
正文 内 容 


图 6-10 ”内 赃 样 式 显示 


在 上 面 的 例子 中 ， 所 有 CSS 编码 都 在 style 标记 中 ， 方 便 了 后 期 维护 ， 页 面 与 行内 样式 相 
比较 也 大 大 瘦身 了 。 如 果 一 个 网 站 拥有 很 多 页 面 ， 且 对 于 不 同 页 面 段落 都 希望 采用 同样 的 风格 
时 ， 内 购 方 式 就 显示 有 点 麻烦 。 此 种 方法 只 适用 于 特殊 页 面 设置 单独 的 样式 风格 。 


6.3.3 ”链接 样式 

链接 样式 是 CSS 中 使 用 频率 最 高 ， 也 是 最 实用 的 方法 。 它 可 以 很 好 地 将 “页 面 内 容 ” 和 
“样式 风格 代码 ”分 离 成 两 个 文件 或 多 个 文件 ， 实 现 了 页 面 框架 HTML 代码 和 CSS 代码 的 完 
全 分 离 。 使 前 期 制作 和 后 期 维护 都 十 分 方便 。 同 一 个 CSS 文件 , 根据 需要 可 以 链接 到 网 站 中 所 
有 的 HTML 页 面 上 ， 使 得 网 站 整体 风格 统一 并 且 后 期 维护 的 工作 量 也 大 大 减少 。 

链接 样式 是 指 在 外 部 定义 CSS 样式 表 并 形成 以 .css 为 扩展 名 的 文件 ， 然 后 在 页 面 中 通过 
<link> 标 记 链 接 到 页 面 中 。 该 链接 语句 必须 放 在 页 面 的 <head> 标 记 区 ， 代 码 如 下 所 示 。 


<link rel="stylesheet" type="text/css" href="1.css" /> 


(1) rel 表示 链接 到 样式 表 ， 其 值 为 stylesheet。 
(2) type 表示 样式 表 类 型 为 CSS 样式 表 。 
(3) href 指定 了 CSS 样式 表 文件 的 路 径 ， 此 处 表示 当前 路 径 下 名 称 为 1.css 文件 。 


这 里 使 用 的 是 相对 路 径 。 如 果 HTML 文档 与 CSS 样式 表 没 有 在 同一 路 径 下 ， 就 需要 指定 
样式 表 的 绝对 路 径 或 引用 位 置 。 


【 例 6.5】〔 实 例文 件 : ch06\6.5.html) 

<!DOCTYPE html> 

<html> 

<head> 

<title> 链 接 样 式 </title> 

<link rel="stylesheet" type="text/css" href="6.5.css"/> 
</head> 

<body> 

<h1>CSS 学 习 </hl1> 
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<p> 此 段落 使 用 链接 样式 修饰 </p> 
</body> 
</html> 


(实例 文件 : ch06\6.5.css) 
hli{ 
text-align:center; /* 设 置 标题 居中 显示 */ 
' 
Pi 
font-weight:29px; /* 设 置 字体 的 粗细 */ 
text-align:center; /* 设 置 段 落 居中 显示 */ 
font-style:italic; /* 设 置 字 体 样式 为 斜体 */ 
下 
在 正 11.0 中 的 浏览 效果 如 图 6-11 所 示 , 其 中 标题 和 段落 以 不 同样 式 显示 , 标题 居中 显示 ， 
段落 以 斜体 居中 显示 。 
本 DA 天 书本 KKode 国 ~ 可 2 


|§ BF x 苞 
识 和 EE 下 , rn 


CSS 学 习 


几 碟 活化 万 遂 共 萨 式 斤 季 


图 6-11 链接 样式 显示 


链接 样式 的 最 大 优势 就 是 将 CSS 代码 和 HTML 代码 完全 分 离 ， 并 且 同 一 个 CSS 文件 能 被 
不 同 的 HTML 文件 链接 使 用 。 


在 设计 整个 网 站 时 ， 为 了 实现 相同 的 样式 风格 ， 可 以 将 同一 个 CSS 文件 链接 到 所 
EECEEE 有 的 页 面 中 去 。 如 果 整 个 网 站 需要 修改 样式 ， 只 修改 CSS 文件 即 可 。 


6.3.4 导入 样式 


导入 样式 和 链接 样式 基本 相同 , 都 需要 创建 一 个 单独 的 CSS 文件 , 然后 将 其 引入 到 HIML 
文件 中 ， 只 不 过 语法 和 运作 方式 有 所 差别 。 采 用 导入 样式 是 在 HTML 文件 初始 化 时 ， 会 被 导 
入 到 HTML 文件 内 ， 作 为 文件 的 一 部 分 ， 类 似 于 内 嵌 效 果 。 链 接 样 式 则 是 在 HTML 标记 需要 
样式 风格 时 才 以 链接 方式 引入 。 

导入 外 部 样式 表 是 指 在 内 嵌 样 式 表 的 <style> 标 记 中 ， 使 用 @import 导入 一 个 外 部 的 CSS 
文件 ， 例 如 : 


<head> 
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<style type="text/css"> 
< 
Qimport "1.css" 
-—-> 
</style> 
</head> 


导入 外 部 样式 表 相当 于 将 样式 表 导 入 到 内 嵌 样 式 表 中 ， 其 中 @import 必须 在 样式 表 的 开始 
部 分 〈 位 于 其 他 样式 表 代码 的 上 面 ) 。 


【 例 6.6】 “实例 文件 :ch06\6.6html) 


<!DOCTYPE html> 
<html> 

<head> 
<title> 导 入 样式 </title> 
<style> 

Qimport "6.6.css" 
</style> 

</head> 

<body> 
<h1l>CSs 学 习 </h1> 

<p> 此 段落 使 用 导入 样式 修饰 </p> 
</body> 

</html> 


(实例 文件 ，ch06\6.6.css) 


hl{text-align:center; /* 设 置 标题 居中 显示 */ 
color:#0000ff; /* 设 置 标 题 的 颜色 为 蓝 色 */ 
下 

p{font-weight:bolder; /* 设 置 字体 的 粗细 */ 
text-decoration:underline;  /* 设 置 下 夯 线 效果 */ 
font-size:20px; /* 设 置 字体 的 大 小 */ 


} 


在 正 11.0 中 的 浏览 效果 如 图 6-12 所 示 , 其 中 标题 和 段落 以 不 同样 式 显示 , 标题 居中 显示 、 
颜色 为 蓝 色 ， 段 落 的 字体 设置 为 加 粗 、 下 画 线 ， 大 小 为 20px。 


- 0O x 
名 “Di+ 本 书 源 代 码 Vcode\ 呈 国 ”中 搜 宗 

EB 导入 样式 x | 

将 下, fen 


C58 学 习 
此 J 入 样式 修饰 


图 6-12 导入 样式 显示 
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导入 样式 与 链接 样式 比较 ， 最 大 的 优势 就 是 可 以 一 次 导入 多 个 CSS 文件 ， 其 格式 如 下 所 
示 。 

<style> 

@import "6.6.css" 


Qimport "test.css" 
</style> 


6.3.5 ”优先 级 问题 


如 果 同 一 个 页 面 采用 了 多 种 CSS 样式 表 方 式 〈 例 如 同时 使 用 行内 样式 、 链 接 样 式 和 内 霸 
样式 ) ， 且 这 几 种 方式 共同 作用 于 同一 属性 ， 就 会 出 现 优先 级 问题 。 例 如 ， 使 用 内 同样 式 设置 
字体 为 宋体 ， 使 用 链接 样式 设置 字体 为 红色 ， 那 么 二 者 会 同时 生效 ， 但 如 果 都 设置 字体 颜色 且 
颜色 不 同 ， 那 么 哪 种 样式 的 设置 才 有 效 呢 ? 

1. 行内 样式 和 内 嵌 样 式 比较 

例如 ， 有 这 样 一 种 情况 : 


<style> 

pt{color:red} 

</style> 

<p style="color:blue"> 段 落 应 用 样式 </p> 


在 样式 定义 中 ， 段 落 标记 <p> 匹 配 了 两 种 样式 规则 ， 一 种 使 用 内 媒 样 式 定义 颜色 为 红色 ， 
一 种 使 用 p 行内 样式 定义 颜色 为 蓝 色 ， 而 在 页 面 代 码 中 ， 该 标记 使 用 了 类 选择 符 。 这 时 ， 标 记 
内 容 最 终 会 以 哪 一 种 样式 显示 呢 ? 


【 例 6.7】 “实例 文件 :ch06\6.7.html) 


<!DOCTYPE html> 

<html> 

<head> 
<title> 优 先 级 比较 </title> 
<style> 

p{color:red} 

</style> 

</head> 

<body> 

<p style="color:blue"> 优 先 级 测试 </p> 
</body> 

</html> 


在 正 11.0 中 的 浏览 效果 如 图 6-13 所 示 ， 段 落 以 蓝 色 字体 显示 ， 可 以 看 出 行内 样式 优先 级 
大 于 内 嵌 样 式 。 
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一 口 x 


@ 站 DA\ 本 书 源 ft 克 \code 煌 图 ~ 加 
Ey x 加 

请 当 百 度 - 下 , 你 加 知道 

优先 级 测试 


图 6-13 优先 级 显示 


2. 内 谋 样 式 和 链接 样式 比较 
以 相同 例子 测试 内 嵌 样 式 和 链接 样式 优先 级 。 将 相应 的 颜色 样式 代码 单独 放 在 一 个 CSS 
文件 中 ， 以 供 链接 样式 引用 。 


【 例 6.8】〔 实 例文 件 ，ch06\6.8.html) 
<!DOCTYPE html> 

<html> 

<head> 

<title> 优 先 级 比较 </title> 

<link href="6.8.css" type="text/css" rel="stylesheet"> 
<style>p{color:red} 
</style></head> 

<body> 

<p> 优 先 级 测试 </p> 

</body> 

</html> 


(实例 文件 :ch06\6.8.css) 
p{color:yellow} 


在 正 11.0 中 的 浏览 效果 如 图 6-14 所 示 ， 段 落 以 红色 字体 显示 ， 可 以 看 出 内 嵌 样 式 优先 级 
大 于 链接 样式 。 
ng 目 x 
@ 司 “Di 本 书 源 代 双 codev 国 ~ 上 
导 优先 级 比较 x | 
请 当 百 度 一 下 ， 你 就 知道 


优先 级 测试 


图 6-14 ”优先 级 测试 


3. 链接 样式 和 导入 样式 
现在 进行 链接 样式 和 导入 样式 的 优先 级 比较 。 分 别 创 建 两 个 CSS 文件 ， 一 个 作为 链接 ， 
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一 个 作为 导入 。 


【 例 6.9】〈 实 例文 件 : ch06\6.9.html) 
<!DOCTYPE html> 

<html> 

<head> 

<title> 优 先 级 比较 </title> 
<style> 

Cimport "mo 9 2 Oa 

</style> 

<link href="6.9 1.css" type="text/css" rel="stylesheet"> 
</head> 

<body> 

<p> 优 先 级 测试 </p> 

</body> 

</html> 


(实例 文件 :ch06\6.9_1.css) 
p{color:green} 
(实例 文件 ，ch06\6.9_2.css) 
p{color:purple} 
在 下 11.0 中 的 浏览 效果 如 图 6-15 所 示 ， 段 落 以 绿色 显示 。 可 以 看 出 链接 样式 优先 级 大 于 
导入 样式 。 
号 口 这 


@ 间 DA\ 本 书 源 代码 \codeW 图 ~ 地 
妆 优先 级 比较 x 攻 


请 当 百 度 一 下 ， 你 就 知道 


优先 级 测试 


图 6-15 优先 级 比较 


通过 比较 , CSS 样式 表 方式 的 优先 级 顺序 由 大 到 小 依次 为 行内 样式 、 内 嵌 样 式 、 链 接 样式 、 
导入 样式 。 


6.4 CSS3 选择 器 


选择 器 (selector) 也 被 称 为 选择 符 。 所 有 HTML 语言 中 的 标记 都 是 通过 不 同 的 CSS 选择 
器 进行 控制 的 。 选 择 器 不 只 是 HMTL 文档 中 的 元 素 标记 ， 还 可 以 是 类 (Class， 这 不 同 于 面向 
对 象 程序 设计 语言 中 的 类 ) 、ID (元素 的 唯一 特殊 名 称 ， 便 于 在 脚本 中 使 用 ) 或 是 元 素 的 某 种 
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状态 (如 alink) 。 根 据 CSS 选择 器 用 途 可 以 把 选择 器 分 为 标记 选择 器 、 类 选择 器 、 全 局 选择 
器 、ID 选择 器 和 伪 类 选择 器 等 。 


6.4.1 标记 选择 器 


HTML 文档 是 由 多 个 不 同 标记 组 成 的 ， 而 CSS 选择 器 就 是 声明 那些 标记 样式 风格 的 。 例 
如 ，Pp 选择 器 ， 就 是 用 于 声明 页 面 中 所 有 <p> 标 记 的 样式 风格 ;同样 ， 也 可 以 通过 hl 选择 器 来 
声明 页 面 中 所 有 <hl> 标 记 的 样式 风格 。 

标记 选择 器 最 基本 的 形式 如 下 所 示 。 


tagName{fpProperty:Value} 


其 中 ，tagName 表示 标记 名 称 ， 例 如 p、hl 等 HTML 标记 ; property 表示 CSS3 属 
ER 性 ; value 表示 CSS3 属性 值 。 


通过 声明 一 个 具体 标记 ， 可 以 对 文档 里 这 个 标记 出 现 的 每 一 个 地 方 应 用 样式 定义 。 这 种 做 
法 通常 用 在 设置 那些 在 整个 网 站 都 会 出 现 的 基本 样式 。 例 如 ， 下 面 的 定义 就 用 于 为 一 个 网 站 设 
置 默认 字体 。 
Body DEEPDLcKdgocoten al el 
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; 
font-size: lem; 
color: #000000; 
} 
这 个 选择 器 声明 了 一 系列 的 标记 ,所 有 这 些 标记 出 现 的 地 方 都 将 以 定义 的 样式 (字体 、 字 
号 和 颜色 ) 显示 。 理 论 上 仅 声 明 (body》 标记 就 已 经 足够 〈 因 为 所 有 其 他 标记 会 出 现在 〈body》 
标记 内 部 ， 并 且 将 因此 继承 它 的 属性 ) ,但 是 许多 浏览 器 不 能 恰当 地 将 这 些 样式 属性 带 入 表格 
和 其 他 标记 里 。 因 此 ， 为 了 避免 这 种 情况 ， 这 里 声明 了 其 他 标记 。 


【 例 6.10】“《 实 例文 件 : ch06\6.10.html) 
<!DOCTYPE html> 

<html> 

<head> 

<title> 标 记 选 择 器 </title> 

<style> 

p{color:blue; /* 设 置 字体 的 颜色 为 蓝 色 */ 
font-size:20px; /* 设 置 字体 的 大 小 */ 
} 

</style> 

</head> 

<body> 
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<p> 此 处 使 用 标记 选择 器 控制 段落 样式 </p> 
</body> 
</html> 


在 正 11.0 中 的 浏览 效果 如 图 6-16 所 示 ， 其 中 段落 字体 以 蓝 色 显示 ， 大 小 为 20px。 


二 口 x 
@ 问 DD 本 书 源 代码 \codeW¥ 图 ” | 搜索 

| 所 标签 连 择 器 x 加 

音 沼 百度 一 下 ， 人 BR 让 


此 处 使 用 标签 选择 器 控制 段落 样式 


图 6-16 标记 选择 器 显示 
如 果 在 后 期 维护 中 需要 调整 段落 颜色 ， 只 需要 修改 color 属性 值 即 可 。 


CSS3 标准 对 于 所 有 属性 和 值 都 有 相对 严格 的 要 求 ， 如 果 声 明 的 属性 在 CSS3 规范 
ae 中 没有 或 者 某 个 属性 值 不 符合 属性 要 求 ， 都 不 能 使 CSS 语句 生效 。 


6.4.2 ”类 选择 器 
使 用 标记 选择 器 可 以 控制 该 页 面 中 所 有 相关 标记 的 显示 样式 , 如 果 需 要 对 其 中 一 系列 标记 
重新 设 定 ， 此 时 仅 使 用 标记 选择 器 是 远 远 不 够 的 ， 还 需要 使 用 类 选择 器 。 
类 选择 器 用 来 为 一 系列 标记 定义 相同 的 呈现 方式 ， 常 用 语法 格式 如 下 所 示 。 
.classValue{property:value} 


classValue 是 选择 器 的 名 称 ， 具 体 名 称 由 CSS 制定 者 自己 命名 。 如 果 一 个 标记 具有 class 
属性 且 class 属性 值 为 classValue, 那么 该 标记 的 呈现 样式 由 该 选择 器 指定 。 在 定义 类 选择 符 时 ， 
需要 在 classValue 前 面 加 一 个 句点 “.”， 示 例如 下 所 示 。 


.rd{color:red} /* 设 置 字体 的 颜色 为 红色 */ 
.se{font-size:3px} /* 设 置 字体 的 大 小 */ 


上 面 定 义 了 两 个 类 选择 器 ， 分 别 为 rd 和 se。 类 的 名 称 可 以 是 任意 英文 字符 串 或 以 英文 开 
头 与 数字 的 组 合 ， 一 般 情 况 下 采用 其 功能 或 效果 的 缩写 。 
在 <p> 标 记 的 class 属性 中 使 用 类 选择 符 ， 示 例如 下 所 示 。 


<p class="rd">class 属 性 是 被 用 来 引用 类 选择 器 的 属性 </p> 


类 选择 器 只 能 被 应 用 于 指定 的 标记 中 《例如 <p> 标 记 ) ， 可 以 在 不 同 标记 中 使 用 相同 的 呈 
现 方式 ， 例 如 : 
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<p class="rd" > 段落 样式 </p> 
<h3 class="rd"> 标 题 样式 </h3> 


【 例 6.11】 (实例 文件 :ch06\6.11.html) 


<!DOCTYPE html> 


<html> 
<head><title> 类 选择 器 </title> 
<style> 
-aaf{ 
color:blue; /* 设 置 字体 的 颜色 为 蓝 色 */ 
font-size:20px; /* 设 置 字体 的 大 小 为 20px*/ 
} 
-bbl{ 
color:red; /* 设 置 字体 的 颜色 为 红色 */ 


font-size:22px; /* 设 置 字体 的 大 小 为 22px*/ 
2 
</style></head><body> 
<h3 class="bb"> 学 习 类 选择 器 </h3> 
<p class="aa"> 此 处 使 用 类 选择 器 aa 控 制 段落 样式 </p> 
<p class="bb"> 此 处 使 用 类 选择 器 bb 控制 段落 样式 </p> 


</body> 
</html> 


在 正 11.0 中 的 浏览 效果 如 


图 6-17 所 示 。 其中, 第 一 个 段落 字体 以 蓝 色 显示 , 大 小 为 20px; 


第 二 个 段落 字体 以 红色 显示 ， 大 小 为 22px; 标题 字体 同样 以 红色 显示 ， 大 小 为 22px。 


6.4.3 ID 选择 器 


GE mT 局 | 本 
ai 
前 sa Ga 


学 习 类 选择 器 
此 处 使 用 类 选择 器 aa 控制 段落 样式 
此 处 使 用 类 选择 器 bb 控制 段落 样式 


图 6-17 类 选择 器 显示 


ID 选择 器 和 类 选择 器 类 似 ， 都 是 针对 特定 属性 的 属性 值 进行 匹配 。ID 选择 器 定义 的 是 某 
一 个 特定 的 HIML 标记 ， 一 个 网 页 文件 中 只 能 有 一 个 标记 使 用 某 一 ZD 的 属性 值 。 
定义 ID 选择 器 的 基本 语法 格式 ， 如 下 所 示 。 


#idVvalue{property:value} 


在 上 述 基 本 语法 格式 中 ，idValue 是 选择 器 名 称 ， 可 以 由 CSS 定义 者 自己 命名 。 如 果 某 标 
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记 具 有 id 属性 ,并且 该 属性 值 为 itValue， 那 么 该 标记 的 呈现 样式 由 该 ID 选择 器 指定 。 在 正常 
情况 下 id 属性 值 在 文档 中 具有 唯一 性 。 在 定义 ID 选择 器 时 ， 需 要 在 idValue 前 面 加 一 个 “#” 
符号 ， 示 例如 下 所 示 。 
#fontstyle 
{ 
color:red; /* 设 置 字体 的 颜色 为 红色 */ 
font-weight:bold; /* 设 置 字体 的 粗细 */ 
font-size:large /* 设 置 字体 的 大 小 */ 
} 
与 类 选择 器 相 比 , 使 用 ID 选择 器 定义 样式 是 有 一 定局 限 性 的 ， 类 选择 器 与 ID 选择 器 主要 
有 以 下 两 种 区 别 : 


(1) 类 选择 器 可 以 给 任意 数量 的 标记 定义 样式 , 但 人 D 选择 器 在 页 面 的 标记 中 只 能 使 用 一 
次 。 

(2) ID 选择 器 比 类 选择 器 具有 更 高 的 优先 级 ， 即 当 ID 选择 器 与 类 选择 器 发 生 冲 突 时 ， 
优先 使 用 ID 选择 器 定义 的 样式 。 


【 例 6.12】《 实 例文 件 ， ch06\6.12.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title>ID 选 择 器 </title> 
<style> 
#fontstyle{ 
color:blue; /* 设 置 字体 的 颜色 为 蓝 色 */ 
font-weight:bold; /* 设 置 字体 的 粗细 */ 
} 
#textstyle{ 
color:red; /* 设 置 字体 的 颜色 为 红色 */ 
font-size:22px; /* 设 置 字体 的 大 小 */ 
} 
</style> 
</head> 
<body> 
<h3 id="textstyle"> 学 习 ID 选 择 器 </h3> 
<p id="textstyle"> 此 处 使 用 ID 选 择 器 texstyle 控 制 段落 样式 </p> 
<p id="fontstyle"> 此 处 使 用 ID 选 择 器 fontstyle 控 制 段落 样式 </p> 
</body> 
</html> 


在 正 11.0 中 的 浏览 效果 如 图 6-18 所 示 。 其 中 , 第 一 个 段落 字体 以 红色 显示 , 大 小 为 22px; 
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第 二 个 段落 字体 以 蓝 色 显示 ， 字 形 加 粗 ; 标题 字体 同样 以 红色 显示 ， 大 小 为 22px。 


下 
且 D* 相 于 fi9\code 禾 ”人 琶 素 Pp- 
| ID "可 
富 公事 庆 -下 ,人 SN 
学 习 ID 选 择 器 


此 处 使 用 ID 选择 器 texstyle 控 制 段落 样式 
此 处 使 用 ID 选择 器 fontstyle 控 制 段 落 样 式 


图 6-18 ID 选择 器 显示 


从 上 面 的 代码 可 以 看 出 , 标题 h3 和 第 一 个 段落 都 使 用 了 名 称 textstyle 的 ID 选择 器 并 都 显 
示 了 CSS 方案 。 这 里 需要 指出 的 是 ， 将 ID 选择 器 用 于 多 个 标记 是 错误 的 ， 因 为 每 个 标记 定义 
的 ID 不 只 是 CSS 可 以 调用 ，JavaScript 等 脚本 语言 同样 也 可 以 调用 。 如 果 一 个 HIML 中 有 两 
个 相同 id 的 标记 ， 那 么 将 会 导致 JavaScript 在 查找 id 时 出 错 。 


JavaScript 等 脚本 语言 也 能 调用 HTML 中 设置 的 这， 因此 ID 选择 器 一 直 被 广泛 使 

9 用 。 网 页 设计 者 在 编写 HTML 代码 时 应 该 养 成 一 个 习惯 ,一 个 id 只 赋予 一 个 HTML 
标记 。 

6.4.4 全 局 选择 器 


如 果 想 要 一 个 页 面 中 的 所 有 HTML 标记 使 用 同一 种 样式 ， 可 以 使 用 全 局 选择 器 。 全 局 选 
择 器 ， 顾 名 思 义 就 是 对 所 有 HTML 标记 起 作用 ， 其 语法 格式 为 : 


*{property:value} 


其 中 ，“*” 表 示 对 所 有 标记 起 作用 ，property 表示 CSS3 属性 名 称 ，value 表示 属性 值 ， 
示例 如 下 所 示 。 


*{margin:0; padding:0;} /* 设 置 所 有 标记 的 外 边 距 和 内 边 距 都 为 0*/ 


【 例 6.13】〔 实 例文 件 ，ch06\6.13.html) 
<!DOCTYPE html> 


<html> 
<head><title> 全 局 选择 器 </title> 
<style> 
中 
color:red; /* 设 置 字体 的 颜色 为 红色 */ 


font-size:30px  ”/* 设 置 字体 的 大 小 为 30px*/ 
} 
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</style> 

</head> 

<body> 

<p> 使 用 全 局 选择 器 修饰 </p> 
<p> 第 一 段 </p> 
<h1> 第 一 段 标题 </h1> 
</body> 

</html> 


在 正 11.0 中 的 浏览 效果 如 图 6-19 所 示 ， 两 个 段落 和 标题 都 是 以 红色 字体 显示 ， 字 体 大 小 
为 30px。 


Ovode dB ~ O| RF 只 = 
全 二 s 
育 Em em 


使 用 全 局 选择 器 修饰 
第 一 段 
第 一 段 标题 


图 6-19 全 局 选择 器 


6.4.5 ”组合 选择 器 


将 多 种 选择 器 进行 搭配 , 可 以 构成 一 种 复合 选择 器 , 也 称 为 组 合 选择 器 , 即将 标记 选择 器 、 
类 选择 器 和 ID 选择 器 组 合 起 来 使 用 。 一 般 的 组 合 方式 是 标记 选择 器 和 类 选择 器 组 合 或 标记 选 
择 器 和 ID 选择 器 组 合 。 由 于 这 两 种 组 合 方式 的 原理 和 效果 一 样 ， 所 以 本 小 节 只 介绍 标记 选择 
器 和 类 选择 器 的 组 合 。 

组 合 选择 器 只 是 一 种 组 合 形式 , 并 不 算是 一 种 真正 的 选择 器 , 但 在 实际 应 用 中 会 经 常 使 用 ， 
其 语法 格式 为 : 


tagName. class Value{property:value} 


在 使 用 的 时 候 一 般 用 在 重复 出 现 并 且 样式 相同 的 一 些 标记 里 ， 例 如 i 列表 、td 单元 格 和 
dd 自 定义 列表 等 ， 示 例如 下 所 示 。 


hl.redfcolor: red} 
<hl class="red"></h1> 


【 例 6.14】“〈 实 例文 件 : ch06\6.14.html) 


<!DOCTYPE html> 
<html> 
<head> 
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<title> 组 合 选择 器 </title> 

<style> 

p{ /* 标 记 选 择 器 */ 
color:red 

} 

p.firstPar{/* 组 合 选择 器 */ 
color:blue 


于 
.firstPar{f/x* 类 选择 器 */ 
color:green 
} 
</style> 
</head> 
<body> 
<p> 这 是 普通 段落 </p> 
<p class="firstPar"> 此 处 使 用 组 合 选 择 器 </p> 
<hl class="firstPar"> 我 是 一 个 标题 </h1> 
</body> 
</html> 


在 正 11.0 中 的 浏览 效果 如 图 6-20 所 示 。 其 中 ， 第 一 个 段落 颜色 为 红色 ， 采 用 的 是 标记 选 
择 器 ， 第 二 个 段落 显示 的 是 蓝 色 ， 采 用 的 是 标记 选择 器 和 类 选择 器 组 合 的 选择 器 ， 标 题 以 绿色 
字体 显示 ， 采 用 的 是 类 选择 器 。 


这 是 普通 段落 
此 处 使 用 组 合 选择 器 


我 是 一 个 标题 
图 6-20 组 合 选择 器 显示 


6.4.6 ”继承 选择 器 

继承 选择 器 的 规则 是 : 子 标记 在 没有 定义 的 情况 下 所 有 的 样式 是 继承 父 标记 的 ; 当 子 标 记 
重新 定义 父 标记 已 经 定义 过 的 声明 时 ， 子 标记 会 执行 后 面 的 声明 ， 其 中 与 父 标记 不 冲突 的 地 方 
仍然 沿用 父 标记 的 声明 。 

使 用 继承 选择 器 就 必须 先 了 解 HTML 文档 树 和 CSS 继承 ， 这 样 才能 够 很 好 地 运用 继承 选 
择 器 .每 个 HTML 都 可 以 被 看 作 一 个 文档 树 ,文档 树 的 根部 就 是 <html> 标 记 , 而 <head> 和 <body> 
标记 就 是 其 标记 。 在 <head> 和 <body> 里 的 其 他 标记 就 是 <html> 标 记 的 孙子 标记 。 整 个 HTML 
就 呈现 一 种 祖先 和 子孙 的 树 状 关系 。CSS 的 继承 是 指 子 孙 标 记 继承 祖先 标记 的 某 些 属性 ， 示 例 
如 下 所 示 。 
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<div class="test"> 
<span><img src="xxxn alt=" 示 例 图 片 "/></span> 
</div> 


对 于 上 面 的 代码 而 言 ， 如 果 其 修饰 样式 为 : 
-test span img {border:lpx blue solid;} 


则 表示 该 选择 器 先 找到 class 为 test 的 标记 , 然后 从 它 的 子 标记 里 查找 <span> 标 记 , 再 从 <span> 
的 子 标记 中 找到 <img> 标 记 。 也 可 以 采用 下 面 的 形式 : 


div span img {border:lpx blue solid;} 
可 以 看 出 其 规律 是 从 左 往 右 依次 细 化 ， 最 后 锁定 要 控制 的 标记 。 


【 例 6.15】 《实例 文件 : ch06\6.15.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 继 承 选择 器 </title> 

<style type="text/css"> 

hl{color:red; text-decoration:underline;} 
hl strong{color:#004400; font-size:40px;} 
hl font{font-size:20px;} 

</style> 

</head> 

<body> 

<h1> 测 试 CSSs 的 <strong> 继 承 </strong> 效 果 </h1> 
<h1> 此 处 使 用 继承 <font> 选 择 器 </font> 了 么 ? </h1> 
</body> 

</html> 


在 正 11.0 中 的 浏览 效果 如 图 6-21 所 示 。 其 中 ， 第 一 个 标题 颜色 为 红色 ， 但 是 “继承 ”两 
个 字 使 用 绿色 显示 并 且 大 小 为 40px*， 除 了 这 两 个 设置 外 的 其 他 CSS 样式 都 是 继承 父 标记 <h1> 
的 样式 〈 例 如 下 画 线 设置 ) ， 第 二 个 标题 虽然 使 用 了 font 标记 修饰 选择 器 ， 但 其 样式 都 是 继承 
于 父 类 标记 <h1>。 


| CE eT EAE 5- 
|e Wan * 辐 
育 35e 下 nanos 


试 CSS 


此 处 选择 器 了 人 么 了 


图 6-21 继承 选择 器 
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6.4.7 伪 类 


伪 类 也 是 选择 器 的 一 种 ， 但 是 用 伪 类 定义 的 CSS 样式 并 不 是 作用 在 标记 上 的 ， 而 是 作用 
在 标记 的 状态 上 。 由 于 很 多 浏览 器 支持 不 同类 型 的 伪 类 ， 并 且 没有 一 个 统一 的 标准 ， 因 此 很 多 
伪 类 都 不 常 被 用 到 。 伪 类 包括 :first-child、:link、:vistited、:hover、:active、:focus 和 :lang 等 。 
其 中 有 一 组 伪 类 是 主流 浏览 器 都 支持 的 ， 就 是 超 链接 的 伪 类 ， 包 括 :link、:vistited、:hover 
和 :active。 

伪 类 选择 器 定义 的 样式 最 常 应 用 在 标记 <a> 上 ， 表 示 超 链接 4 种 不 同 的 状态 : 未 访问 超 链 
接 (link) 、 已 访问 超 链接 (visited) 、 鼠 标 停留 在 超 链接 上 (hover) 和 激活 超 链接 (active) 。 
需要 注意 的 是 ，<a> 标 记 可 以 只 具有 一 种 状态 〈:link) ， 也 可 以 同时 具有 两 种 或 者 三 种 状态 。 
比如 说 ， 任 何 一 个 有 href 属性 的 <a> 标 记 ， 在 未 有 任何 操作 时 都 已 经 具备 了 :link 状态 ， 也 就 是 
满足 了 有 链接 属性 这 个 条 件 ; 如 果 是 访问 过 的 <a> 标 记 , 就 会 同时 具备 :link、visited 两 种 状态 ; 
把 鼠标 指针 移 到 访问 过 的 <a> 标 记 上 时 ，<a> 标 记 就 同时 具备 了 :link、visited、hover 三 种 状态 。 
示例 如 下 所 示 。 


a:link{color:#FF0000; text-decoration:none} 
a:visited{color:#00FF00; text-decoration:none} 
a:hover{color:#0000FF; text-decoration:underline} 
a:active{color:#FFOO0FF; text-decoration:underline} 


上 面 的 样式 表示 该 超 链接 未 访问 时 颜色 为 红色 上 且 无 下 画 线 , 访问 后 是 绿色 且 无 下 画 
ES 线 ， 饼 标 指针 放 在 超 链 接 上 为 蓝 色 且 有 下 画 线 ， 激 活 超 链接 时 为 紫色 且 有 下 画 线 。 


【 例 6.16】 《实例 文件 : ch06\6.16.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 伪 类 </title> 

<style> 

a:link {color: redj /* 未 访问 的 链接 */ 
a:visited {color: green} /* 己 访 问 的 链接 */ 
a:hover {color:blue} /* 鼠标 移动 到 链接 上 */ 
a:active {color: orange} /* 选 定 的 链接 */ 
</style> 

</head> 

<body> 

<a href=""> 链 接 到 本 页 </a> 

<a href="http://www.sohu.com"> 搜 狐 </a> 
</body> 

</html> 


在 正 11.0 中 的 浏览 效果 如 图 6-22 所 示 。 将 鼠标 指针 停留 在 第 一 个 超 链接 上 方 时 ， 显 示 颜 
色 为 蓝 色 ; 另 一 个 是 访问 过 后 的 超 链 接 ， 显 示 颜色 为 绿色 。 
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图 6-22 伪 类 显示 


6.4.8 ”属性 选择 器 

前 面 在 使 用 CSS3 样式 对 HTML 标记 进行 修饰 时 ， 都 是 通过 HTML 标记 名 称 或 自 定义 名 
称 指向 具体 的 HTML 元 素 ， 进 而 控制 HTML 标记 样式 。 那 么 能 不 能 直接 通过 标记 属性 来 进行 
修饰 ， 而 不 通过 标记 名 称 或 自 定义 名 称 。 直 接 使 用 属性 控制 HIML 标记 样式 的 选择 器 称 为 属 


性 选择 器 。 


属性 选择 器 根据 某 个 属性 是 否 存在 或 属性 值 来 寻找 元 素 , 因此 能 够 实现 某 些 非常 有 意思 和 
强大 的 效果 。CSS2 标准 就 已 经 出 现 了 4 个 属性 选择 器 , 在 CSS3 标准 中 又 新 加 了 3 个 属性 选择 
器 ， 也 就 是 说 现在 的 CSS3 标准 共有 7 个 属性 选择 器 ,它们 共同 构成 了 CSS 功能 强大 的 标记 属 


在 CSS3 标准 中 ， 常 见 属性 选择 器 如 表 6-1 所 示 。 


E[foo] 


E[foo= "bar "] 


E[foo~= "bar "] 


El[fool="en"] 


属性 选择 器 格式 | 说 明 


表 6-1 常见 属性 选择 器 


选择 匹配 E 的 元 素 ， 且 该 元 素 定义 了 foo 属性 。 注 意 ，E 选择 器 可 以 省 略 ， 表 示 
选择 定义 了 foo 属性 的 任意 类 型 元 素 

选择 匹配 E 的 元 素 ， 且 该 元 素 将 foo 属性 值 定义 为 了 “bar”。 注 意 ，E 选择 器 可 
以 省 略 ， 用 法 与 上 一 个 选择 器 类 似 

选择 匹配 E 的 元 素 , 且 该 元 素 定义 了 foo 属性 , foo 属性 值 是 一 个 以 空格 符 分 隔 的 
列表 ， 其 中 一 个 列表 的 值 为 “bar”。 注 意 ，E 选择 符 可 以 省 略 ， 表 示 可 以 匹配 任 
意 类 型 的 元 素 

例如 , a[title~="b1"] 匹 配 <a title="b1 b2 b3"></a>, 而 不 匹配 <a title="b2 b3 b5"></a> 
选择 匹配 EE 的 元 素 ， 且 该 元 素 定义 了 foo 属性 ，foo 属性 值 是 一 个 用 连 字符 (-) 
分 隔 的 列表 ， 值 开头 的 字符 为 "en"。 

注意 ，E 选择 符 可 以 省 略 ， 表 示 可 以 匹配 任意 类 型 的 元 素 。 例 如 ，[lang|="en"] 匹 
配 <body lang="en-us"></body>， 而 不 是 匹配 <body lang="f-ag"></body> 
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( 续 表 ) 


属性 选择 器 格式 | 说 明 


El[foo^="bar"] 选择 匹配 EE 的 元 素 ， 且 该 元 素 定 义 了 foo 属性 ，foo 属性 值 包含 了 前 缀 为 "bar" 的 


子 字符 串 。 注 意 ，E 选择 符 可 以 省 略 ， 表 示 可 以 匹配 任意 类 型 的 元 素 。 例 如 ， 
body[lang^="en"] 匹 配 <body lang="en-us"></body>， 而 不 匹配 <body lang="f-ag">< 


/body> 
El[foo$="bar"] 选择 匹配 EE 的 元 素 ， 且 该 元 素 定 义 了 foo 属性，foo 属性 值 包含 后 级 为 "bar" 的 子 


字符 串 。 注 意 卫 选择 符 可 以 省 略 ， 表 示 可 以 匹配 任意 类 型 的 元 素 。 例 如 ， 
img[src$="jpg"] 匹 配 <img src="pjpg"/>， 而 不 匹配 <img src="p.gif"/> 


E[foo*="bar"] 选择 匹配 EE 的 元 素 ， 且 该 元 素 定义 了 foo 属性 ，foo 属性 值 包含 "bar" 的 子 字符 串 。 


注意 ，E 选择 器 可 以 省 略 ， 表示 可 以 匹配 任意 类 型 的 元 素 。 例 如 ，img[src$="jpg"] 


匹配 <img src="p.jpg/>， 而 不 匹配 <img sre="p.gif'/> 


【 例 6.17】 《实例 文件 ，ch06\6.17.html) 

<!DOCTYPE html> 

<html> 

<head> 

<title> 属 性 选择 器 </title> 

<style> 

[align] {color:red} 

[align="left"] {font-size:20px;font-weight:bolder;} 
[lang^="en"] {color:blue;text-decoration:underline;} 
[src$="gif"] {border-width:5px;boder-color:#ff9900} 
</style> 

</head> 

<body> 

<p align=center> 这 是 使 用 属性 定义 样式 </p> 

<p align=left> 这 是 使 用 属性 值 定义 样式 </p> 

<p lang="en-us"> 此 处 使 用 属性 值 前 级 定义 样式 </p> 
<p> 下 面 使 用 了 属性 值 后 绥 定 义 样式 

<img src="2.gif" border="1"/> 

</body> 

</html> 


在 正 11.0 中 的 浏览 效果 如 图 6-23 所 示 。 其 中 ,第 一 个 段落 使 用 属性 align 定义 样式 ， 其 字 


体 颜 色 为 红色 ; 第 二 个 段落 使 用 属性 值 left 修饰 样式 ， 其 字体 颜色 为 红色 ， 大 小 为 20px 并 且 
加 粗 显示 ， 是 因为 该 段落 使 用 了 align 这 个 属性 ; 第 三 个 段落 字体 显示 为 蓝 色 ， 且 带 有 下 画 线 ， 
是 因为 属性 lang 的 值 前 绥 为 en。 最 后 一 个 图 片 以 边框 样式 显示 ， 是 因为 属性 值 后 绥 为 gif。 
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这 是 使 用 属性 定义 样式 
这 是 使 用 属性 值 定义 样式 
此 处 使 用 属性 值 前 级 定义 样式 


下 面 使 用 了 属性 值 后 级 定义 样式 


图 6-23 属性 选择 器 显示 


6.4.9 结构 伪 类 选择 器 

结构 伪 类 选择 器 (Structural pseudo-classes) 是 CSS3 新 增 的 类 型 选择 器 。 顾 名 思 义 ， 结 构 
伪 类 就 是 利用 文档 结构 树 DOM) 实现 元 素 过 滤 ， 也 就 是 说 ， 通 过 文档 结构 的 相互 关系 来 匹 
配 特定 的 元 素 ， 从 而 减少 文档 内 对 class 属性 和 id 属性 的 定义 ， 使 得 文档 更 加 简洁 。 

在 CSS3 版 本 中 ， 新 增 结构 伪 类 选择 器 ， 如 表 6-2 所 示 。 


表 6-2 新 增 结构 伪 类 选择 器 


选择 器 含义 

E:root 匹配 文档 的 根 元 素 ， 对 于 HTML 文档 ， 就 是 HTML 元 素 

E:nth-child(n) 匹配 其 父 元 素 的 第 n 个 子 元 素 ， 第 一 个 编号 为 1 

E:nth-last-child(n) 匹配 其 父 元 素 的 倒数 第 n 个 子 元 素 ， 第 一 个 编号 为 1 

E:nth-of-type(n) 与 :nth-child0 作 用 类 似 ， 但 是 仅 匹 配 使 用 同 种 标签 的 元 素 

E:nth-last-of-type(n) ”| 与 :nth-last-child() 作用 类 似 ， 但 是 仅 匹配 使 用 同 种 标签 的 元 素 

E:last-child 匹配 父 元 素 的 最 后 一 个 子 元 素 ， 等 同 于 :nth-last-child(1) 

E:first-of-type 匹配 父 元 素 下 使 用 同 种 标签 的 第 一 个 子 元 素 ， 等 同 于 :nth-of-type(1) 

E:last-of-type 匹配 父 元 素 下 使 用 同 种 标签 的 最 后 一 个 子 元 素 ， 等 同 于 :nth-last-of-type(1) 

E:only-child 匹配 父 元 素 下 仅 有 的 一 个 子 元 素 ， 等 同 于 :first-child:last-child 或 :nth-child(1): 
nth-last-child(1) 

E:only-of-type 匹配 父 元 素 下 使 用 同 种 标签 的 唯一 一 个 子 元 素 , 等 同 于 :first-of-type:last-of-type 
或 nth-of-type(1):nth-last-of-type(1) 

E:empty 匹配 一 个 不 包含 任何 子 元 素 的 元 素 ， 注 意 ， 文 本 节点 也 被 看 作 子 元 素 


【 例 6.18】〔 实 例文 件 ， ch06\6.18.html) 
<!DOCTYPE html> 
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<html> 
<head><title> 结 构 伪 类 </title> 

<style> 

tr:nth-child (even){ 

background-color:#96FED]1 

} 

tr:last-child{font-size:20px;} 

</style> 

</head> 

<body> 

<table border=1 width=80%> 

<th> 姓 名 </th><th> 编 号 </th><th> 性 别 </th> 

<tr><tqd> 刘 海松 </td><td>006</td><td> 男 </tqd></tr> 
<tr><td> 王 峰 </td><td>001</td><td> 女 </td></tr> 
<tr><tq> 李 张力 </td><td>002</td><tq> 男 </td></tr> 
<tr><td> 于 辉 </td><td>008</td><td> 男 </td></tr> 
<tr><td> 张 浩 </td><td>004</td><td> 女 </td></tr> 
<tr><td> 刘 永 权 </td><td>003</td><td> 男 </td></tr> 
</table> 

</body> 

</html> 


在 下 11.0 中 的 浏览 效果 如 图 6-24 所 示 。 其 中 ， 表 格 中 奇数 行 显示 指定 颜色 ， 并 且 最 后 一 
行 字体 的 大 小 以 20px 显示 ， 其 原因 就 是 采用 了 结构 伪 类 选择 器 。 


二 
4 Dsiiode dO eR Pp 

en 

| 


了 


主峰 


于 省 


有 
1 
bo | 
003 


刘 水 权 男 


图 6-24 ”结构 伪 类 选择 器 


6.4.10 ”UI 元素 状态 伪 类 选择 器 


UI 元 素 状态 伪 类 (The UI element states pseudo-classes) 也 是 CSS3 新 增 选择 器 。 其 中 ， 
UI 即 User Interface (用户 界面 ) 的 简称 。UI 设计 是 指 对 软件 的 人 机 交互 、 操 作 罗 辑 、 界 面 美 
观 的 整体 设计 。 好 的 UI 设计 不 仅 是 让 软件 变 得 有 个 性 ， 有 品味 ， 还 要 让 软件 的 操作 变 得 舒适 、 
简单 、 自 由 、 充 分 体现 软件 的 定位 和 特点 。 

UI 元 素 的 状态 一 般 包括 可 用 、 不 可 用 、 选 中 、 未 选中 、 获 取 焦 点 、 失 去 焦点 、 锁 定 、 待 
机 等 。CSS3 定义 了 3 种 常用 的 状态 伪 类 选择 器 ， 详 细 说 明 如 表 6-3 所 示 。 
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表 6-3 常用 的 状态 伪 类 选择 器 


选择 器 说 明 

E:enabled ”| 选择 匹配 E 的 所 有 可 用 UI 元 素 。 注意 ,在 网 页 中 ,UI 元素 一 般 是 指 包含 在 form 元 素 内 
的 表单 元 素 。 例 如 ，input:enabled 匹配 <form><input type=text/><input type=button 
disabled=disabled/></form> 代 码 中 的 文本 框 ， 而 不 匹配 代码 中 的 按钮 

E:disabled | 选择 匹配 E 的 所 有 不 可 用 元 素 。 注 意 ， 在 网 页 中 ，UI 元 素 一 般 是 指 包含 在 form 元 素 内 


扒 表 单元 素 。 例 如 ，input:disabled 匹配 <form><input type=text/><input type=button 
disabled=disabled/></form> 代 码 中 的 按钮 ， 而 不 匹配 代码 中 的 文本 框 

选择 匹配 E 的 所 有 可 用 UI 元 素 。 注 意 ， 在 网 页 中 ，UI 元 素 一 般 是 指 包 含 在 form 元 素 内 
的 表单 元 素 。 例 如 ，input:checked 匹配 <form><input type=checkbox/><input type=radio 
checked=checked/></form> 代 码 中 的 单 选 按钮 ， 但 不 匹配 该 代码 中 的 复 选 杠 


E:checked 


【 例 6.19】 《实例 文件 : ch06\6.19.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title>UI 元 素 状态 伪 类 选择 器 </title> 

<style> 

input:enabled {border:lpx dotted #666;background:#ff9900;} 
input:disabled {border:lpx dotted #999;background:#F2F2F2;} 
</style> 

</head> 

<body> 

<Center> 

<h3 align=center> 用 户 登录 </h3> 

<form method="post" action=""> 

用 户 名 : <input type=text name=name><br> 

密 gnbsp; &nbsp; 码 : <input type=password name=pass disabled="disabled"><br> 
<input type=submit value= 提 交 > 

<input type=reset value= 重 置 > 

</form> 

<center> 

</body> 

</html> 


在 下 11.0 中 的 浏览 效果 如 图 6-25 所 示 。 其 中 ， 表 格 中 可 用 的 表单 元 素 都 显示 为 浅黄 色 ， 
而 不 可 用 的 元 素 显 示 为 灰色 。 
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- Oo x 
| 民 ”DAVE 书 源 fVcode 汪 图 - C | 控 过 
[ER 

请 EE 下 tome 


用 户 登录 
用 户 名 :， 革 时 BB 玫 于 
密码: 

[| 


图 6-25 UI 元 素 状态 伪 类 选择 器 应 用 


6.5 选择 器 声明 


使 用 CSS 选择 器 可 用 控制 HTML 标记 样式 ， 其 中 每 个 选择 器 属性 可 以 一 次 声明 多 个 ， 即 
创建 多 个 CSS 属性 修饰 HIML 标记 。 实 际 上 也 可 以 将 选择 器 声明 多 个 ， 并 且 任何 形式 的 选择 
器 〈 如 标记 选择 器 、class 类 别 选 择 器 、ID 选择 器 等 ) 都 是 合法 的 。 


6.5.1 集体 声明 

在 一 个 页 面 中 ， 有 时 需要 不 同 种 类 标记 样式 保持 一 致 ， 例 如 需要 <p> 标 记 和 <hl> 标 记 的 字 
体 保 持 一 致 ， 此 时 可 以 将 <p> 标 记 和 <hl> 标 记 共 同 使 用 类 选择 器 。 除 此 之 外 ， 还 可 以 使 用 集体 
声明 方法 。 集 体 声明 就 是 在 声明 各 种 CSS 选择 器 时 ,如果 某 些 选择 器 的 风格 是 完全 相同 的 或 者 
部 分 相同 ， 可 以 将 风格 相同 的 CSS 选择 器 同时 声明 。 


【 例 6.20】〔 实 例文 件 ，ch06\6.20.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 集 体 声明 </title> 
<style type="text/css"> 
hl,h2,p{ 
color:red; /* 设 置 字体 的 颜色 为 红色 */ 
font-size:20px; /* 设 置 字体 的 大 小 */ 
font-weight:bolder; /* 设 置 字体 的 粗细 */ 
} 
</style> 
</head> 
<body> 
<h1> 此 处 使 用 集体 声明 </h1> 
<h2> 此 处 使 用 集体 声明 </h2> 
<p> 此 处 使 用 集体 声明 </p> 
</body> 
</html> 
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在 正 11.0 中 的 浏览 效果 如 图 6-26 所 示 。 其 中 ， 网 页 上 标题 1、 标 题 2 和 段落 都 以 红色 字 
体 加 粗 显 示 ， 并 且 大 小 为 20px。 


= 口 x 
避 DA 本 书 源 代 码 \codeW3 图 ~ 口 。 接 实 - 
| 各 委 体 声明 x 全 
将 名 百度 一 下 , 你 MN 知道 


此 处 使 用 集体 声明 
此 处 使 用 集体 声明 
此 处 使 用 集体 声明 


图 6-26 集体 声明 显示 


6.5.2 多重 内 套 声 明 

在 CSS 控制 HTML 标记 样式 时 ， 还 可 以 使 用 层 层 递 进 的 方式 〈 钳 套 方式 ) 对 指定 位 置 的 
HTML 标记 进行 修饰 。 例 如 ， 当 <p> 与 </p> 之 间 包 含 <a></a> 标 记 时 ， 就 可 以 使 用 这 种 方式 对 
HMTL 标记 进行 修饰 。 


【 例 6.21】 实例 文件 ，ch06\6.21.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 多 重 嵌 套 声明 </title> 

<style> 

p{font-size:20px;} 

p a{color:red;font-size:30px;font-weight:bolder;} 
</style> 

</head> 

<body> 

<p> 这 是 一 个 多 重典 套 <a href=""> 测 试 </a></p> 
</body> 

</html> 


在 正 11.0 中 的 浏览 效果 如 图 6-27 所 示 。 其 中 , 在 段落 中 的 超 链接 为 红色 字体 , 大 小 为 30px， 
其 原因 是 使 用 了 媒 套 声明 。 


> x 
国 D:\ 本 书 源 代 码 \ode 谤 图 ~ 所 搜索 -| 


这 是 一 个 多 重 嵌 套 测试 


图 6-27 多重 嵌 套 声明 
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6.6 ”综合 实例 1 一 一 制作 五 彩 标题 


使 用 CSS 可 以 给 网 页 标题 设置 不 同 的 字体 样式 ， 即 建立 一 个 CSS 规则 ， 将 样式 应 用 到 页 
面 中 出 现 的 所 有 <hl> 标 记 或 者 是 整个 站 点 〈 当 使 用 一 个 外 部 样式 表 的 时 候 ) 。 如 果 我 们 想 改变 
整个 站 点 上 所 有 出 现 <h1> 标 记 的 颜色 、 尺 寸 、 字 体 ， 只 需要 修改 一 些 CSS 规则 即 可 。 

有 具体 步骤 如 下 所 示 : 


0 分 析 需 求 


本 实例 要 求 简单 ， 使 用 标记 <h1> 创 建 一 个 标题 ， 然 后 使 用 CSS 样式 对 标题 进行 修饰 ， 可 
以 从 颜色 、 尺 寸 、 字 体 、 背 景 、 边 框 等 方面 入 手 。 


名 到 构建 HTML 页 面 
创建 HTML 页 面 ， 完 成 基本 框架 并 创建 标题 。 其 代码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 
<title> 五 彩 标题 </title> 
</head> 

<body> 

<body> 

<h1> 

<span class=c1> 美 </span> 
<span class=c2> 食 </span> 
<span class=c3> 介 </span> 
<span class=c4> 绍 </span></h1> 
</body> 

</html> 


在 下 11.0 中 的 浏览 效果 如 图 6-28 所 示 。 标 题 在 网 页 中 的 显示 没有 任何 修饰 。 

@ 使 用 内 访 样 式 

如 果 要 对 标题 进行 修饰 , 需要 添加 CSS (此 处 使 用 内 赃 样 式 ) ,在 <head> 标 记 中 添加 CSS， 
其 代码 如 下 : 

<style> 

hi{} 


</style> 


此 时 没有 任何 变化 ， 只 是 在 代码 中 引入 了 <style> 标 记 。 
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L 国 改变 颜色 、 字 体 和 尺寸 


添加 CSS 代码 ， 改 变 标题 样式 ， 在 颜色 、 字 体 和 尺寸 上 面 对 其 样式 进行 设置 ， 代 码 如 下 : 


hilf{ 

font-family:Arial, sans-serif; /* 设 置 文 本 的 字体 样式 */ 
font-size:24px; /* 设 置 字体 的 大 小 为 24px*/ 
color:#369; /* 设 置 字体 颜色 为 浅 蓝 色 */ 


} 


在 正 11.0 中 的 浏览 效果 如 图 6-29 所 示 。 其 中 ,字体 大 小 为 24px， 颜 色 为 浅 蓝 色 ， 字 形 为 
Arial。 


-~ D x - OO x 
Dd -| = 一 可 间 ”D:\ 本 书 源 代 码 ode\ 汪 国字， 搜索. 
忆 五 彩 标题 x 局 五 和 标题 xj 
次 总 百度 -下 , 你 0 请 写 百 左下 ,剑道 
图 6-28 标题 显示 图 6-29 添加 文本 修饰 标记 


[加 加 入 灰色 边框 
为 标题 添加 边框 ， 其 代码 如 下 : 


padding-bottom: 4px; /* 设 置 边框 与 文字 的 距离 为 4px*/ 
border-bottom:2px solid #ccc; /* 设 置 边框 的 颜色 */ 


在 正 11.0 中 的 浏览 效果 如 图 6-30 所 示 ， 在 “美食 介绍 ”文字 下 面 添 加 了 一 个 边框 ， 边 框 
和 文字 距离 是 4px。 


liQg 增加 背景 图 
使 用 CSS 样式 为 标记 <h1> 添 加 背景 图 片 ， 其 代码 如 下 : 
background:url (01.jpg) repeat-x bottom;  /* 设 置 背景 图 片 和 水 平平 铺 模式 */ 


在 IE 11.0 中 的 浏览 效果 如 图 6-31 所 示 ， 在 “美食 介绍 ”文字 下 面 添加 了 一 个 背景 图 片 ， 
图 片 在 水 平 (X) 轴 方 向 进行 平 铺 。 
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图 6-30 ”添加 边框 样式 图 6-31 添加 背景 


La 国定 义 标题 宽度 
使 用 CSS 属性 将 背景 图 变 小 ， 使 其 正好 符合 四 个 字体 的 宽度 ， 其 代码 如 下 : 


width:120px; 


在 正 11.0 中 的 浏览 效果 如 图 6-32 所 示 ，“ 美 食 介 绍 ” 文 字 下 面 的 背景 图 缩短 ， 正 好 和 字 
体 宽度 相同 。 


[0 定义 字体 颜色 
在 CSS 样式 中 ， 为 每 个 字 定 义 颜色 ， 其 代码 如 下 。 


区 

color:#B3EE3A; ”/* 设 置 第 1 个 字 的 颜色 */ 
} 
:C2 

Color:#71C671; /* 设 置 第 2 个 字 的 颜色 */ 
} 
eC 

color:#00F5FF; ”/* 设 置 第 3 个 字 的 颜色 */ 
} 
-C41{ 

color:#00EE00; ”/* 设 置 第 4 个 字 的 颜色 */ 
. 


在 正 11.0 中 的 浏览 效果 如 图 6-33 所 示 ， 每 个 字 都 显示 出 不 同 的 颜色 ， 加 上 背景 色 共有 5 
种 颜色 。 


- 0 x - 0O x 
要。D:\ 本 书 源 代 码 \code\j 国 ~ 搜索 .… 局 ”DA:\ 本 书 源 代码 vcode 六 国 ~ 搜索 .… 
克 五 彩 标 是 x 医生 后 五 有 标题 x | 加 
文件 (F) 编辑 (E) 查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 文件 (P) ”编辑 (查看 (V) 收藏 夫 (A) 工具 (D) 帮助 (H) 
请 党 百度 一 下 ， 你 就 知道 商 党 百度 一下 ， 你 就 知道 
羔 盒 企 纽 姜 合 企 绍 , 
图 6-32 定义 宽度 图 6-33 ”定义 字体 颜色 
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6.7 综合 实例 2 一 一 制作 新 闻 菜 单 


在 网 上 浏览 新 闻 可 能 是 每 个 上 网 者 都 喜欢 做 的 事情 。 一 个 布局 合理 、 样 式 美观 大 方 的 新 闻 菜 
单 是 吸引 人 的 主要 途径 之 一 。 本 实例 使 用 CSS 控制 HTML 标记 创建 新 闻 菜 单 ， 具 体 步 骤 如 下 : 


[@ 和 分 析 需 求 


创建 一 个 新 闻 菜单 需要 包含 两 个 部 分 : 一 个 是 父 菜单 , 用 来 表明 新 闻 类 别 ; 一 个 是 子 菜单 ， 
介绍 具体 的 新 闻 消 息 。 菜 单方 式 很 多 ， 可 以 用 <table> 创 建 ， 也 可 以 用 列表 创建 ， 同 样 也 可 以 使 
用 段落 <p> 创 建 。 本 实例 采用 <p> 标 记 结合 <div> 创 建 。 


国 到 分 析 局 部 和 人 整体， 构建 HTML 网 页 


一 个 新 闻 菜 单 可 以 分 为 三 个 层次 ， 即 新 闻 父 菜单 、 新 闻 焦点 和 新 闻 子 菜单 ， 下 面 分 别 使 用 
div 创建 ， 其 HTML 代码 如 下 所 示 。 


<!DOCTYPE html> 

<html > 

<head><title> 导 航 菜单 </title> 

</head> 

<body> 

<div class="big"> 

<h2> 时 事 热点 </h2> 

<div class="up"> 

<a href="#">7 月 周 周 爬 房 团 报名 </a> 

</div> <div class="down"> 

<P>。50 万 买 下 两 居 会 员 优惠 全 世界 大 学 排名 工薪 阶层 留学 美国 </p> 
<p>。 家 电 | 买房 上 焦点 打 电话 送礼 楼 市 松动 百 余 项 目 打折 </p> 
<p>。 财 经 | 油价 大 跌 ”cPI 新 高 </p> 

</div> 

</div> 

</body> 

</html> 


在 正 11.0 中 的 显示 效果 如 图 6-34 所 示 , 一 个 标题 一 个 超 链接 和 三 个 段落 以 普通 样式 显示 ， 
其 布局 只 存在 上 下 层次 。 


用 8 添加 CSS 代码 ， 修 饰 整体 样式 


对 于 HTML 页 面 ， 需 要 有 一 个 整体 样式 ， 其 代码 如 下 所 示 。 


<style> 
*{/* 全 局 选择 器 */ 
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padding:0px; 

margin:0px; 

} 

body{ 

font-family: "宋体"; /* 设 置 文 本 的 字体 样式 */ 
font-size:12px; /* 设 置 字体 的 大 小 */ 

} 

-bigf{ 

width:400px; /* 设 置 边框 的 宽度 */ 
border:#33CCCC 1lpx solid; /* 设 置 边框 的 颜色 为 浅 绿 色 */ 
4 

</style> 


在 正 11.0 中 的 显示 效果 如 图 6-35 所 示 ， 可 以 看 到 全 局 层 会 以 边框 显示 ， 宽 度 为 400px， 
其 颜色 为 浅 绿 色 ; 文档 内 容 中 的 字 采 用 宋体 、 大 小 为 12px, 并 且 定 义 内 容 和 层 之 间 的 空隙 为 0、 
层 和 层 之 间 的 空隙 为 0。 


vstivode i - O| mR 5- = 
7 四 I 站 ”DA 本 书 源 代码 \code 刘 图 ”中 搜索. 只 
A SM HR) WAIN IRT) RH) 本 
ET ls SM x 加 

文件 (F) 编 辕 (E) 查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 

时 事 热 点 
了 7 肌 膨 息 房 团 报名 
50 万 买 下 两 居 会 员 优惠 全 世界 大 学 排名 工薪 阶层 婴 学 美国 


“家电 | 买房 上 打 电 话 送礼 楼 市 松动 百 从 


“财经 | 油价 大 跌 CPI 新 高 


图 6-34 无 CSS 标记 显示 图 6-35 整体 样式 添加 
ti@ 细 添加 CSS 代码 ， 修 饰 新 闻 父 菜单 


对 新 闻 父 类 菜单 进行 CSS 控制 ， 其 代码 如 下 所 示 。 


h2{background-color:olive; /* 设 置 背 景 颜 色 */ 
display:block; /* 设 置 方 框 的 显示 方式 */ 
width:400px; /* 设 置 方 框 的 宽度 */ 
height:18px; /* 设 置 方 框 的 高 度 */ 
line-height:18px; /* 设 置 字体 的 行 高 */ 
font-size:14px;} /* 设 置 字体 的 大 小 */ 


在 正 11.0 中 的 显示 效果 如 图 6-36 所 示 。 标 题 “ 时 事 热 点 ”以 矩形 方 框 显示 ， 背 景色 为 橄 
榄 色 ， 字 体 大 小 为 14px， 行 高 为 18px。 


但 名 添加 CSS 菜单 ， 修 饰 子 菜单 


.up{padding-bottom:5px; /* 设 置 下 边 距 的 大 小 */ 
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text-align:center;  /* 设 置 文本 居中 显示 */ 
} 
p{line-height:20px;}  ”/* 设 置 文本 的 行 高 */ 
在 正 11.0 中 的 显示 效果 如 图 6-37 所 示 ， 超 链接 “7 月 周 周 爬 房 团 报名 ”居中 显示 ， 所 有 
段落 之 间 间 隙 增 大 。 


间 ”DA 本 书 源 代码 \codeVE 图 ”所 || 六 未 -. 万 | | 名 DAH# 源 Kode 胡 国 ”| 搜索 Fe] 
|S Sem * 司 

文 性 站、 沪 细 ( 昌 、 豆 看 (V) 收藏 灾 (A) 工具 (T) 帮助 (H) 

再 务 百度 一 下 , 你 视 知 站 


|s 号 豚 菜 单 x 加 
文件 (站 ”所 纺 (查看 (V) 收藏 天 (A] 工具 (D) 帮助 (H) 


“* 50 万 买 下 两 居 会 员 优惠 全 世界 大 学 排名 工薪 阶层 留学 美国 
“家 电 | 买房 上 焦点 打 电话 送礼 楼 市 松动 再 余 项 目 打折 
“财经 | 油价 大 跌 CPI 新 商 


图 6-36 ”修饰 超级 链接 图 图 6-37 子 菜单 样式 显示 
有 添加 CSS 菜单， 修饰 超级 链接 
af /* 设 置 超级 链接 文字 的 样式 */ 


font-size:16px; 
font-weight:800; 
text-decoration:none; 
margin-top: 5px; 
display:block;} 
a:hover{/* 设 置 鼠 标 放 置 超级 链接 文字 上 的 样式 */ 
color:#FF0000; 
text-decoration:underline;} 


在 下 11.0 中 的 显示 效果 如 图 6-38 所 示 。 超 链接 “7 月 周 周 爬 房 团 报名 ”字体 变 大 ， 加 粗 ， 
并 且 无 下 画 线 显 示 ; 将 鼠标 指针 放 在 此 超级 链接 上 时 会 以 红色 字体 显示 , 并 且 下 面 带 有 下 画 线 。 


| - DO x 
| 间 “Da 本 书 源 fEYXode\ 国 ”|| 控 家 nD 
Is 导航 半音 x 加 

文件 (P 城 各 (E) 可 看 (V) 收藏 天 (A) 工具 (D) 帮助 (H) 


| 户 各 百度 -下 , 处 0 所 


“50 万 买 下 两 居 会 员 优惠 全 世界 大 学 排名 na 


* 家 电 | 买房 上 焦点 打 电 话 送礼 楼 市 松动 百 余 项 目 打折 
。 财 经 | 油价 大 跌 CPI 新 高 


图 6-38 ”超级 链接 修饰 显示 
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6.8 专家 解 惑 


1. 用 CSS 定义 的 字体 在 不 同 浏览 器 中 的 大 小 不 一 样 ， 该 如 何 解决 ? 

例如 ,使 用 font-size:14px 定义 的 宋体 文字 ,在 正 下 实际 高 是 16px、 下 空白 是 3px, 在 Firefox 
浏览 器 下 实际 高 是 17px、 上 空 lpx、 下 空 3px。 其 解决 办 法 是 在 文字 定义 时 设 定 line-height, 
并 确保 所 有 文字 都 有 默认 的 line-height 值 。 

2. CSS 在 网 页 制作 中 一 般 有 四 种 方式 ， 那 么 具体 在 使 用 时 该 采用 哪 种 用 法 呢 ? 

有 多 个 网 页 要 用 到 的 CSS， 采 用 外 链 CSS 文件 的 方式 ， 这 样 网 页 的 代码 将 大 大 减少 ， 修 
改 起 来 非常 方便 ;只 在 单个 网 页 中 使 用 的 CSS， 采 用 文档 头 部 方式 ， 只 有 在 网 页 一 两 个 地 方才 
用 到 的 CSS， 采 用 行内 插入 方式 。 

3. CSS 的 行内 样式 、 内 族 样 式 和 链接 样式 可 以 在 一 个 网 页 中 混用 吗 ? 

三 种 用 法 可 以 混用 且 不 会 造成 混乱 ， 这 也 是 为 什么 称 之 为 “ 层 营 样式 表 ” 的 原因 。 浏 览 器 
在 显示 网 页 时 是 这 样 处 理 的 : 先 检查 有 没有 行内 插入 式 CSS， 有 就 执行 ， 针 对 本 人 句 的 其 他 CSS 
就 不 去 管 了 ; 再 检查 内 与 方式 的 CSS， 有 就 执行 ， 在 前 两 者 都 没有 的 情况 下 再 检查 外 链 文件 方 
式 的 CSS。 这 是 因为 三 种 CSS 的 执行 优先 级 依次 是 行内 样式 、 内 嵌 样 式 、 链 接 样 式 。 
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常见 的 网 站 、 博 客 通常 使 用 文字 或 图 片 来 曾 述 自己 的 观点 ， 其 中 文字 是 传递 信息 的 主要 手 
段 。 美 观 大 方 的 网 站 或 者 博客 需要 使 用 CSS 样式 修饰 。 设 置 文本 样式 是 CSS 技术 的 基本 使 命 ， 
通过 CSS 文本 标记 语言 可 以 设置 文本 的 样式 和 粗细 等 。 


7.1 字体 属性 


一 个 杂乱 无 序 、 堆 砌 而 成 的 网 页 会 使 人 产生 枯燥 无 味 、 望 而 止步 的 感觉 ， 而 一 个 美观 大 方 
的 网 页 会 让 人 有 美 轮 美 负 、 流 连 忘 返 的 感觉 。 这 美观 大 方 的 效果 ， 都 是 使 用 CSS 字体 样式 来 设 
置 的 。 通 过 对 本 节 内 容 的 学 习 ， 相 信 读 者 可 以 设计 出 令 人 流连 忘 返 的 网 页 。 


7.1.1 字体 font-family 


font-family 属性 用 于 指定 文字 字体 类 型 ， 例 如 宋体 、 黑 体 、 隶 书 、Times New Roman 等 ， 
即 在 网 页 中 展示 字体 不 同 的 形状 ， 有 具体 的 语法 格式 如 下 所 示 。 

{font-family:name} 

{font-family:cursive|lfantasy|lmonospace|serif|sans-serif} 

从 语法 格式 上 可 以 看 出 ，font-family 有 两 种 声明 方式 。 第 一 种 方式 ， 使 用 name 字体 名 称 ， 
按 优先 顺序 排列 ， 以 逗号 隔 开 ， 如 果 字 体 名 称 包含 空 格 ， 就 应 使 用 引号 括 起 ， 第 二 种 声明 方式 
使 用 所 列 出 的 字体 序列 名 称 ， 如 果 使 用 fantasy 序列 ， 将 提供 默认 字体 序列 。 在 CSS3 中 ， 比 较 
常用 的 是 第 一 种 声明 方式 。 


【 例 7.1】〔 实 例文 件 : ch07V7.Lhtml) 
<!DOCTYPE html> 
<html> 
<head> 
<style type=text/css> 
p{font-family: 黑 体 } 
</style> 
</head> 
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<body> 

<p align=center> 天 行 健 ， 君 子 以 自强 不 息 。</p> 

</body> 

</html> 

在 正 11.0 中 的 浏览 效果 如 图 7-1 所 示 ， 文 字 居 中 并 以 黑体 显示 。 


- 0 x 
媚 ”D'\ 本 书 源 代码 code\ 汪 国 ”搜索 .. 

息 ”D:\ 本 书 源 代码 vcode\ 源 代 x | 

文件 (F) 编辑 (E) 查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 

户 各 百度 -下 ,你 M0 道 


天 行 健 ， 君 子 以 自强 不 息 。 


图 7-1 字 型 显示 


在 字体 显示 时 ， 如 果 指 定 一 种 特殊 字体 类 型 ， 而 在 浏览 器 或 者 操作 系统 中 该 类 型 不 能 正确 
获取 ， 可 以 通过 font-family 预 设 多 种 字体 类 型 。font-family 属性 可 以 预 置 多 个 供 页 面 使 用 的 字 
体 类 型 ， 即 字体 类 型 序列 ， 其 中 每 种 字 型 之 间 使 用 逗号 隔 开 。 如 果 前 面 的 字体 类 型 不 能 够 正确 
显示 ， 则 系统 将 自动 选择 后 一 种 字体 类 型 ， 以 此 类 推 。 

所 以 ， 在 设计 页 面 时 ， 一 定 要 考虑 字体 的 显示 问题 ， 为 了 保证 页 面 达到 预计 的 效果 ， 最 好 
提供 多 种 字体 类 型 ， 而 且 最 好 以 最 基本 的 字体 类 型 作为 最 后 一 个 ， 其 样式 设置 如 下 所 示 。 

Ef 

font-family: 华 文 彩云 ,黑体 ,宋体 

} 

当 font-family 属性 值 中 的 字体 类 型 由 多 个 字符 串 和 空格 组 成 时 (例如 Times New Roman)， 
该 值 就 需要 使 用 双 引 号 引起 来 。 

Pi 


font-family:"Times New Roman™" 


7.1.2 字号 font-size 


一 个 网 页 中 ， 标 题 通常 使 用 较 大 字体 显示 ， 用 于 吸引 人 注意 ， 小 字体 用 来 显示 正常 内 容 。 
大 小 字体 结合 形成 的 网 页 既 能 吸引 人 的 眼球 ， 又 可 提高 阅读 效率 。 
在 CSS3 新 规定 中 ， 通 常 使 用 font-size 设置 文字 大 小 ， 其 语法 格式 如 下 所 示 。 


{font-size: 数 值 
linherit|xx-small|x-small|small|medium|large|x-large|xx-largel|larger| 
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smaller|length} 


其 中 ， 通 过 数值 来 定义 字体 大 小 ， 例 如 用 font-size:10px 的 方式 定义 字体 大 小 为 10px。 此 
外 ， 还 可 以 通过 其 他 属性 值 定义 字体 的 大 小 ， 各 属性 值 含义 如 表 7-1 所 示 。 


表 7-1 字号 属性 值 

属性 值 。 | 说 明 

xx-small | 绝对 字体 尺寸 ， 根 据 对 象 字体 进行 调整 ， 最 小 

x-small 。 | 绝对 字体 尺寸 ， 根 据 对 象 字体 进行 调整 ， 较 小 

small 绝对 字体 尺寸 ， 根 据 对 象 字体 进行 调整 ， 小 

medium | 默认 值 ， 绝 对 字体 尺寸 ， 根 据 对 象 字体 进行 调整 ， 正 党 

large 绝对 字体 尺寸 ， 根 据 对 象 字体 进行 调整 ， 大 

x-large | 绝对 字体 尺寸 ， 根 据 对 象 字体 进行 调整 ， 较 大 

xx-large 。 | 绝对 字体 尺寸 ， 根 据 对 象 字体 进行 调整 ， 最 大 

larger 相对 字体 尺寸 ， 相 对 于 父 对 象 中 字体 尺寸 进行 相对 增 大 ， 使 用 成 比例 的 em 单位 计算 

smaller 。 | 相对 字体 尺寸 ， 相 对 于 父 对 象 中 字体 尺寸 进行 相对 减 小 ， 使 用 成 比例 的 em 单位 计算 

length 。 ”| 百分数 或 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 , 不 可 为 负 值 。 其 百分比 取 值 基于 父 对 象 
中 字体 的 尺寸 


【 例 7.2】〈 实 例文 件 : ch07\7.2.html) 
<!DOCTYPE html> 
<html> 
<body> 
<div style="font-size:10pt"> 上 级 标记 大 小 


<p 
<p 
<p 
<p 
<p 
<p 


style="font-size: 
style="font-size: 
style="font-size: 
style="font-size: 
style="font-size: 
style="font-size: 


</div> 
</body> 
</html> 


small"> 小 </p> 
larger"> 大 </p> 
x-small"> 小 </p> 
x-larger"> 大 </p> 
50%"> 子 标记 </p> 
25pt"> 子 标记 </p> 


在 正 11.0 中 的 浏览 效果 如 图 7-2 所 示 。 网 页 中 的 文字 被 设置 成 了 不 同 的 大 小 , 其 设置 方式 
采用 了 绝对 数值 、 关 键 字 和 百分比 等 形式 。 
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子 标记 


图 7-2 字体 大 小 显示 
在 上 面 的 例子 中 ，font-size 字体 大 小 为 50% 时 ， 其 比较 对 象 是 上 一 级 标签 中 的 10pt。 同 样 
还 可 以 使 用 inherit 值 ， 直 接 继承 上 级 标记 的 字体 大 小 ， 代 码 如 下 : 
<div style="font-size:50pt"> 上 级 标记 


<p style="font-size: inherit "> 继承 </p> 
</div> 


7.1.3 字体 风格 font-style 
font-style 通常 用 来 定义 字体 风格 ， 即 字体 的 显示 样式 。 在 CSS3 新 规定 中 ， 语 法 格式 如 下 
所 示 。 


font-style:normal|italic|oblique|inherit 


其 属性 值 有 4 个 ， 具 体 含义 如 表 7-2 所 示 。 
表 7-2 字体 风格 属性 值 


normal 默认 值 ， 浏 览 器 显示 一 个 标准 的 字体 样式 

italic | 训 览 器 会 显示 一 个 斜体 的 字体 样式 | 
| ovine EC 一 个 倾斜 的 字体 样式 | 
| mas | 规定 应 该 从 父 元 素 继承 字体 样式 | 


【 例 7.3】 《实例 文件 ， ch07\7.3.html) 


<!DOCTYPE html> 

<html> 

<body> 

<p style="font-style:italicn"> 梅 花香 自 苦寒 来 </p> 
<p style="font-style:normaln> 梅 花香 自 苦 寒 来 </p> 
<p style="font-style:oblique"> 梅 花香 自 苦 寒 来 </p> 
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</body> 
</html> 


在 正 11.0 中 的 浏览 效果 如 图 7-3 所 示 ， 分 别 显示 了 不 同 的 文字 样式 。 


- oO x 
因 Di 本 书 源 代 克 \code 汪 轿 ”搜索 
局 DA 二 书 源 Rodev 源 代 - 
文件 (和 ”篇 生 (和 至 看 (V) 收藏 夫 (A] 工具 (D 福 W(H) 
育 EK- 下 , fw 


八 花 秃 后 者 千 详 
梅花 香 自 苦寒 来 
奏 龙 天 捕 者 半天 


图 7-3 字体 风格 显示 


7.1.4 加 粗 字体 font-weight 
通过 设置 字体 粗细 ， 可 以 让 文字 显示 不 同 的 外 观 。 通 过 CSS3 中 的 font-weight 属性 可 以 定 
义 字体 的 粗细 程度 ， 其 语法 格式 如 下 所 示 。 
{font-weight:100-900|boldl|bolder|lighter|normal;} 


font-weight 的 属性 值 分 别 是 bold、bolder、lighter、normal、100~900。 如 果 没 有 设置 该 属 
性 ， 则 使 用 其 默认 值 normal。 属 性 值 设 置 为 100~900， 值 越 大 ， 加 粗 的 程度 就 越 高 。 其 具体 含 
义 如 表 7-3 所 示 。 


表 7-3 加 粗 字体 属性 值 


机 


bolder 定义 更 粗 的 字体 ， 相 对 值 


lighter | 定义 更 细 的 字体 ， 相 对 值 | 


normal 默认 ， 标 准 字 体 


浏览 器 默认 的 字体 粗细 是 400， 另 外 也 可 以 通过 参数 lighter 和 bolder 使 得 字体 在 原 有 基础 
上 显得 更 细 或 更 粗 。 


【 例 7.4】〔 实 例文 件 : ch07\7.4.html) 

<!DOCTYPE html> 

<html> 

<body> 

<p style="font-weight:bold"> 学 习 雷 锋 好 榜样 (bold) </p> 
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<p style="font-weight:bolder"> 学 习 雷 锋 好 榜样 (bolder)</p> 
<p style="font-weight:1ighter"> 学 习 雷 锋 好 榜样 (Lighter) </p> 
<p style="font-weight:normal"> 学 习 雷 锋 好 榜样 (normal)</p> 
<p style="font-weight:100"> 学 习 雷 锋 好 榜样 (100)</p> 

<p style="font-weight:400"> 学 习 雷 锋 好 榜样 (400) </p> 

<p style="font-weight:900"> 学 习 雷 锋 好 榜样 (900) </p> 

</body> 

</html> 


在 正 11.0 中 的 浏览 效果 如 图 7-4 所 示 。 文字 以 不 同方 式 加 粗 , 其 中 使 用 了 关键 字 加 粗 和 数 
值 加 粗 。 


间 D:\ 不 书 学 代码 Yode 放 图 ” 忆 搜索 
| Dv code\Ett.. x | 
文人 (P) 坊 疆 (和 二 看 (V) 收 意 夫 (A) 工具 (T) 帮助 (H) 
| 育 当 百 度 - 下 , 你 饭 知道 


学 习 雷 锋 好 榜样 bold) 


学 习 雷锋 好 榜样 (bolder) 


锋 好 榜样 (lighter) 


i 锋 好 榜样 (normal) 
雷锋 好 榜样 (100) 
| 学 习 雷 锋 好 榜样 (400) 
| 学 习 雷 锋 好 榜样 (900) 


图 7-4 字体 粗细 显示 


7.1.5 “小 写字 母 转 为 大 写字 母 font-variant 


font-variant 属性 设置 大 写字 母 的 字体 显示 文本 , 这 意味 着 所 有 的 小 写字 母 均 会 被 转换 为 大 
写 。 在 CSS3 中 ， 其 语法 格式 如 下 所 示 。 


{ffont-variant:normal1smal1-caps|inherit} 
font-variant 有 3 个 属性 值 , 分 别 是 normal、 small-caps 和 inherit。 其 具体 含义 如 表 7-4 所 示 。 


表 7-4 各 属性 值 含义 


属性 值 “| 说 明 
nomal 。 | 默认 值 ， 浏 览 器 会 显示 一 个 标准 的 字体 


small-caps 浏览 器 会 显示 小 型 大 写字 母 的 字体 


inherit 规定 应 该 从 父 元 素 继承 font-variant 属性 的 值 
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【 例 7.5】“〈 实 例文 件 : ch07\7.5-html) 


<!DOCTYPE html> 

<html> 

<body> 

<p style="font-variant:normal">Happy BirthDay to You</p> 

<p style="font-variant:small-caps">Happy BirthDay to You</p> 
</body> 

</html> 


在 正 11.0 中 的 浏览 效果 如 图 7-5 所 示 ， 可 以 看 到 字母 以 大 写 形式 显示 。 

通过 对 两 个 属性 值 产生 的 效果 进行 比较 可 以 看 到 ， 设 置 为 normal 属性 值 的 文本 以 正常 文 
本 显示 ， 而 设置 为 small-caps 属性 值 的 文本 中 既 有 稍 大 的 大 写字 母 也 有 小 的 大 写字 母 ， 也 就 是 
说 ， 使 用 了 small-caps 属性 值 的 段落 文本 全 部 变 成 了 大 写 ， 只 是 大 写字 母 的 尺寸 不 同 。 


全 口 x 
| 外 “D:\ 本 书 尝 代 码 ode 呈 国 ”已 | 搜索 
| 人 DFIRcodevgRE- x | 

文件 (有 ) 涡 硒 ( 昌 ， 理 看 (V 收 大 严 (A) 工具 (T) 才 助 (H) 
请 EK 下, fr0E 


Happy BirthDay to You 


HAPPY BIRTHDAY TO YOU 


图 7-5 字母 大 小 写 转换 


7.1.6 字体 复合 属性 font 


在 设计 网 页 时 ， 为 了 使 网 页 布局 合理 且 文 本 规范 ， 对 字体 设计 需要 使 用 多 种 属性 ， 例 如 定 
义 字 体 粗 细 、 定 义 字体 大 小 等 。 但 是 多 个 属性 分 别 书 写 相 对 比较 麻烦 ，CSS3 样式 表 提供 的 font 
属性 就 解决 了 这 一 问题 。 

font 属性 可 以 一 次 性 使 用 多 个 属性 的 属性 值 定义 文本 字体 ， 其 语法 格式 如 下 所 示 。 


{font:font-style font-variant font-weight font-size font-family} 


font 属性 中 的 属性 排列 顺序 是 font-style、font-variant、 font-weight、 font-size 和 font-family， 
各 属性 的 属性 值 之 间 使 用 空格 隔 开 ， 但 是 如 果 font-family 属性 要 定义 多 个 属性 值 ， 就 需 使 用 逗 
号 “，” 隔 开 。 

在 属性 排列 中 ，font-style、font-variant 和 font-weight 这 三 个 属性 值 是 可 以 自由 调换 的 ; 而 
font-size 和 font-family 则 必须 按照 固定 的 顺序 出 现 ， 如 果 这 两 个 属性 的 顺序 不 对 或 缺少 一 个 ， 
那么 整 条 样式 规则 可 能 会 被 忽略 。 


CSS3 字体 与 段落 属性 第 7 党 


【 例 7.6】 实例 文件 : ch07\7.6html) 
<!DOCTYPE html> 

<html> 

<head> 

<style type=text/css> 


Pi 


font:normal small-caps bolder 20pt "Cambria","Times New Roman" ,宋体 


} 


</style> 

</head> 

<body> 

<p> 读 书 和 学 习 是 在 别人 思想 和 知识 的 帮助 下 ， 建 立 起 自己 的 思想 和 知识 。</p> 
</body> 

</html> 


在 正 11.0 中 的 浏览 效果 如 图 7-6 所 示 ， 文 字 被 设置 成 宋体 并 加 粗 。 


读书 和 学 习 是 在 别人 思想 和 知识 的 帮 
助 下 ， 建 立 起 自己 的 思想 和 知识 。 


图 7-6 复合 属性 font 显示 


7.1.7 字体 颜色 color 
没有 色彩 的 网 页 是 枯燥 而 没有 生机 的 , 这 就 意味 着 一 个 优秀 的 网 页 设计 者 不 仅 要 能 够 合理 


安排 页 面 布 


表现 力 ， 给 浏 


局 ， 还 要 具有 一 定 的 色彩 视觉 和 色彩 搭配 能 力 ， 这 样 才能 够 使 网 页 更 加 精美 、 具 有 
| 览 者 以 亲切 感 。 


在 CSS3 样式 中 ， 通 常 使 用 color 属性 来 定义 颜色 。 其 属性 值 通常 使 用 的 设 定 方式 如 表 7-5 


所 示 。 


表 7-5 属性 值 设 定 域 


属性 值 
color name 


hex_number 


说 明 
规定 属性 值 为 颜色 名 称 的 颜色 (例如 red) 
规定 属性 值 为 十 六 进 制 值 的 颜色 〈 例 如 #tt0000) 


rgb_number 


规定 属性 值 为 rgb 代码 的 颜色 (例如 rgb(255,0,0)) 


inherit 


hsl number 


规定 应 该 从 父 元 素 继承 颜色 
规定 属性 值 为 HSL 代码 的 颜色 (例如 hsl(0,75%,50%)) ， 此 为 CSS3 新 增加 的 颜色 表现 
方式 
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( 续 表 ) 
属性 值 说 明 
hsla_number | 规定 属性 值 为 HSLA 代码 的 颜色 (例如 hsla(120,50%,50%,1)) ， 此 为 CSS3 新 增加 的 颜 
色 表 现 方式 
rgba_number | 规定 属性 值 为 RGBA 代码 的 颜色 (例如 rgba(125,10,45,0.5)) ， 此 为 CSS3 新 增加 的 颜 
色 表现 方式 


【 例 7.7】 实例 文件 ，ch07\7.7.html) 
<!DOCTYPE html> 


<html> 

<head> 

<style type="text/css"> 

body{color:red} /* 设 置 body 标 记 的 颜色 */ 
hl{color:#00ff00} /* 设 置 hi 标记 的 颜色 */ 
p.ex{color:rgb(0,0,255)} /* 设 置 组 合 选择 器 p .ex 的 颜色 */ 
p-.hs{color:hs1 (0,75%,50%)} /+ 设置 组 合 选择 器 p.hs 的 颜色 */ 


p.ha{color:hsla (120,50%,50%,1)} /* 设 置 组 合 选择 器 p .ha 的 颜色 */ 

p.rafcolor:rgba(125,10,45,0.5) } /* 设 置 组 合 选择 器 p .ra 的 颜色 */ 

</style> 

</head> 

<body> 

<h1> 这 是 标题 1</h1> 

<p> 这 是 一 段 普通 的 段落 。 请 注意 ， 该 段落 的 文本 是 红色 的 。 在 body 选择 器 中 定义 了 本 页 面 中 的 
默认 文本 颜色 。</p> 

<p class="ex"> 该 段落 定义 了 class="ex"。 该 段落 中 的 文本 是 蓝 色 的 。</p> 

<p class="hs"> 此 处 使 用 了 css3 中 的 新 增加 的 HSL 函 数 ， 构 建 颜色 。</p> 

<p class="ha"> 此 处 使 用 了 css3 中 的 新 增加 的 HSLA 函 数 ， 构 建 颜色 。</p> 

<p class="ra"> 此 处 使 用 了 css3 中 的 新 增加 的 RGBA 函 数 ， 构 建 颜色 。</p> 

</body> 

</html> 


在 下 11.0 中 的 浏览 效果 如 图 7-7 所 示 , 其 中 文字 以 不 同 颜色 显示 , 并 采用 了 不 同 的 颜色 取 
值 方式 。 


机 DVIvodeg 二 ” 口 | WF 万 - 
[a DA 严 忆 再 fcodevHt I 
HM RU) EE GBA) IRT WH) 
诊 -下 ,090 


这 是 标题 1 

这 是 一 段 普通 的 段落 。 请 注 章 ， 该 段落 的 文本 是 红色 的 。 在 body 
选择 器 中 定义 了 本 页 面 中 的 默认 文本 毅 色 。 

该 段落 定义 了 class- ex"。 该 段落 中 的 文本 是 蓝 色 的 。 

此 处 使 用 了 CSS3 中 的 新 增加 的 HSL 函 数 ， 构 建 颜色 

此 处 使 用 了 CSS3 中 的 新 增加 的 HSLA 函 数 ， 构 建 颜色 


图 7-7 color 属性 显示 
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在 本 实例 中 ， 使 用 了 3 个 CSS3 中 新 增加 的 表现 形式 , 分 别 是 HSL ( ) 、HSLA () 
TE 和 RGBA ( ) 。 这 3 个 函数 在 Firefox 中 支持 ， 但 下 浏览 器 尚 不 支持 。 


7.2 文本 高 级 样式 


对 于 一 些 有 特殊 要 求 的 文本 〈 例 如 文字 存在 阴影 ) ， 字 体 种 类 会 发 生变 化 。 如 果 再 使 用 上 
面 所 介绍 的 CSS 样式 进行 定义 ， 其 结果 就 不 会 得 到 正确 显示 ， 这 时 就 需要 一 些 特定 的 CSS 标 
记 来 完成 这 些 要 求 。 


7.2.1 阴影 文本 text-shadow 


在 显示 字体 时 ， 有 时 根据 要 求 需要 给 文字 添加 阴影 效果 并 为 文字 阴影 添加 颜色 ， 以 增强 网 
页 整体 表现 力 ， 这 时 就 需要 用 到 CSS3 样式 中 的 text-shadow 属性 。 实 际 上 在 CSS 2 中 ，W3C 
就 已 经 定义 了 text-shadow 属性 ， 只 是 CSS3 又 重新 定义 了 它 ， 为 它 增 加 了 不 透明 度 效 果 。 

text-shadow 属性 有 四 个 属性 值 ， 最 后 两 个 是 可 选 的 ， 第 一 个 属性 值 表示 阴影 的 水 平 位 移 ， 
可 取 正 负 值 ， 第 二 个 值 表 示 阴 影 垂直 位 移 ， 可 取 正 负 值 ; 第 三 个 值 表示 阴影 模糊 半径 ， 不 可 为 
负 值 ， 该 值 可 选 ， 第 四 个 值 表示 阴影 颜色 值 ， 该 值 可 选 ， 语 法 格式 如 下 : 


text-shadow: length length opacity color 


【 例 7.8】〔 实 例文 件 ，ch07\7.8.html) 

<!DOCTYPE html> 

<html> 

<body> 

<p align=center style="text-shadow:0.lem 2px 6px blue;font-size:80px;"> 
这 是 Textshadow 的 阴影 效果 </p> 

</body> 

</html> 


在 正 11.0 中 的 浏览 效果 如 图 7-8 所 示 ， 文 字 居 中 并 带 有 阴影 显示 。 


这 是 TextShadow 
的 阴影 效果 


图 7-8 阴影 显示 结果 图 
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通过 上 面 的 实例 ， 可 以 看 出 阴影 偏 移 由 两 个 length 值 调整 文本 阴影 的 位 移 。 第 一 个 length 
值 指定 到 文本 右边 的 水 平 距离 ， 负 值 会 把 阴影 放置 在 文本 左边 ; 第 二 个 length 值 指定 到 文本 下 
边 的 垂直 距离 ， 负 值 会 把 阴影 放置 在 文本 上 方 。 在 阴影 偏 移 之 后 ， 可 以 指定 一 个 模糊 半径 。 


模糊 半径 是 一 个 长 度 值 ， 它 支持 了 模糊 效果 的 范围 ， 但 如 何 计算 效果 的 具体 算法 并 
二 没有 指定 。 在 阴影 效果 的 长 度 值 之 前 或 之 后 ， 还 可 以 指定 一 个 颜色 值 。 颜色 值 会 被 
用 作 阴 影 效果 的 基础 ， 如 果 没 有 指定 颜色 ， 那 么 将 使 用 文本 颜色 来 替代 。 


7.2.2 ”溢出 文本 text-overflow 

在 网 页 显示 信息 时 ， 如 果 指 定 显示 区 域 宽 度 ， 而 显示 信息 过 长 ， 其 结果 就 是 信息 会 撑 破 指 
定 的 信息 区 域 ， 进 而 破坏 整个 网 页 布局 。 如 果 设 定 的 信息 显示 区 域 过 长 ， 就 会 影响 整体 网 页 显 
示 。 以 前 ， 我 们 遇 到 这 样 的 情况 时 ， 通 常 使 用 JavaScript 将 超出 的 信息 进行 省 略 。 现 在 ， 只 需 
要 使 用 CSS3 新 增 的 text-overflow 属性 就 可 以 解决 这 个 问题 。 

text-overflow 属性 用 来 定义 当 文 本 溢出 时 是 否 显示 省 略 标记 , 即 定义 省 略 文本 的 显示 方式 ， 
并 不 具备 其 他 的 样式 属性 定义 。 要 实现 溢出 时 产生 省 略 号 的 效果 还 需 定义 强制 文本 在 一 行内 显 
示 (white-space:nowrap) 及 溢出 内 容 为 隐藏 (overflow:hidden) ， 只 有 这 样 才能 实现 浇 出 文本 
显示 省 略 号 的 效果 。 

text-overflow 语法 如 下 所 示 。 


text-overflow: cliplellipsis 
其 属性 值 含义 如 表 7-6 所 示 。 
表 7-6 溢出 文本 属性 值 


不 显示 省 略 标记 〈.…) ， 而 是 简单 的 裁 切 


ellipsis 当 对 象 内 文本 溢出 时 显示 省 略 标记 〈.…) 
这 里 需要 特别 说 明 的 是 ，text-overflow 属性 非常 特殊 ， 当 设置 的 属性 值 不 同时 ， 其 
GE 浏览 器 对 text-overflow 属性 支持 也 不 相同 。 当 text-overflow 属性 值 是 clip 时 ,现在 


主流 的 浏览 器 都 支持 ， 如 果 text-overflow 属性 是 ellipsis 时 , 除了 Firefox 5.0 浏览 器 
暂 不 支持 ， 其 他 主流 浏览 器 都 支持 。 


【 例 7.9】 “实例 文件 :ch07\7.9.html) 


<!DOCTYPE html> 
<html> 
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<body> 
<style type="text/css"> 
.test demo clip{text-overflow:clip; overflow:hidden; white-space:nowrap; 
width:200px; background:#ccc;} 
.test demo ellipsis{text-overflow:ellipsis;overflow:hidden;white-space: 
nowrap;width:200px;background:#ccc;} 
</style> 
<h2>text-overflow:clip</h2> 
<div class="test demo clip"> 
不 显示 省 略 标记 ， 而 是 简单 的 裁 切 条 
</div> 
<h2>text-overflow:ellipsis</h2> 
<div class="test demo ellipsis"> 
显示 省 略 标记 ， 不 是 简单 的 裁 切 条 
</div> 
</body> 
</html> 


在 正 11.0 中 的 浏览 效果 如 图 7-9 所 示 ， 文 字 在 指定 位 置 被 裁 切 ，ellipsis 属性 以 省 略 号 形 
式 出 现 。 


- D x 
@ 加 Vie/DY 本 所 雪人 到 图 | 按 术 - 

关 D\< 书 姑 {tt3\code\ 滁 化 x 下 

请 台 百 度 一 下 ， 人 BE 


text-overflow:clip 
不 显示 省 略 标记 ， 而 是 简单 和 


text-overflow:ellipsis 


显示 省略 标记 ， 不 是 简单 


图 7-9 文本 省 略 处 理 


7.2.3 ”控制 换行 word-wrap 


当 在 一 个 指定 区 域 显示 一 整 行文 字 时 ， 如 果 文 字 在 一 行 显示 不 完 时 就 需要 进行 换行 ， 如 果 
不 进行 换行 就 会 超出 指定 区 域 范围 。 此 时 我 们 可 以 采用 CSS3 中 新 增加 的 word-wrap 文本 样式 
来 控制 文本 换行 。 

word-wrap 语法 格式 如 下 所 示 。 


word-wrap: normal1break-word 


其 属性 值 含义 比较 简单 ， 如 表 7-7 所 示 。 
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表 7-7 控制 换行 属性 值 


属性 值 说 明 
normal 允许 内 容 顶 开 指定 的 边界 
break-word 内 容 将 在 边界 内 换行 。 如 果 需 要 ， 词 内 换行 (word-break) 也 会 发 生 


【 例 7.10】“《 实 例文 件 : ch07\7.10.html) 


<!DOCTYPE html> 

<html> 

<head> 

<style type="text/css"> 

div{width:300px;word-wrap:break-word;border:1lpx solid #999999;} 

</style> 

</head> 

<body> 

<div>wordwrapbreakwordwordwrapbreakwordwordwrapbreakwordwordwrapbreakwo 
rd</div> 

De 

<div> 全 中 文 的 情况 ， 全 中 文 的 情况 ， 全 中 文 的 情况 全 中 文 的 情况 全 中 文 的 情况 </div><br /> 

<div>This is all English,This is all English,This is all English,This is 
all English</div> 

</body> 

</html> 


在 下 11.0 中 的 浏览 效果 如 图 7-10 所 示 ， 文 字 在 指定 位 置 被 控制 换行 。 


一 na x 
| 如 DA 本 书 涯 代码 odeW 国 ”| 搜索 
© ps 本 3 源 fcode 源 人 x | 
痪 全 百 杰 一 下 ， 你 8K50 利 


ordwrapbreakwordwordwrapbreakwordwor 
wrapbreakwordwordwrapbreakword 


全 忠文 的 情况 ， 至 中 文 的 请 吏 ， 全 下 文 榴 
情况 全 中 文 的 情况 全 中 文 的 情况 


nglish, This is all English, This is 
11 English 


pe is all English, This is all 


图 7-10 文本 强制 换行 


word-wrap 属性 可 以 控制 换行 ， 当 属性 取 值 break-word 时 将 强制 换行 。 中 文 文本 没有 任何 
问题 ， 英 文 语句 也 没有 任何 问题 ， 但 是 对 于 长 的 英文 字符 串 不 起 作用 ， 也 就 是 说 break-word 属 
性 只 控制 是 否 断 词 ， 而 不 是 断 字符 。 
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7.2.4 保持 字体 尺寸 不 变 font-size-adjust 
有 时 候 在 同一 行 的 文字 由 于 所 采用 字体 种 类 不 一 样 或 者 修饰 样式 不 一 样 , 会 导致 其 字体 尺 
寸 不 一 样 ， 整 行文 字 显得 比较 杂乱 。 此 时 需要 CSS3 属性 font-size-adjust 来 处 理 。 
font-size-adjust 用 来 定义 整个 字体 序列 中 所 有 字体 的 大 小 是 否 保持 同一 个 尺寸 ， 其 语法 格 
式 如 下 所 示 。 


font-size-adjust:none|number 


其 属性 值 含义 如 表 7-8 所 示 。 


表 7-8 保持 字体 尺寸 不 变 属性 值 


【 例 7.11】 《实例 文件 ，ch07\7.11 html) 

<!DOCTYPE html> 

<html> 

<head> 

<style> 

.big{font-family:sans-serif;font-size:40pt;} 
.a{font-family:sans-serif;font-size:1l5pt;font-size-adjust:1;} 
.b{font-family:sans-serif;font-size:30pt;font-size-adjust:0.5;} 
</style> 

</head> 

<body> 

<p class="big"><span class="b"> 闻 鸡 起 舞 </span></p> 

<p class="big"><span class="a"> 闻 鸡 起 舞 </span></p> 

</body> 

</html> 


在 正 11.0 中 的 浏览 效果 如 图 7-11 所 示 ， 同 一 行 的 字体 大 小 相同 。 


- 0o x 
司 DA 不 # 因 人 三 \code 图 ”名 近东 

S DA 本 书 吾 ftwode 天 fx 

座 3 下 pooE 


闻 鸡 起 舞 i 


闻 鸡 起 舞 


图 7-11 尺寸 一 致 显示 
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7.3 段落 属性 


网 页 由 文字 组 成 ， 而 用 来 表达 同一 个 意思 的 多 个 文字 组 合 可 以 称 为 段落 。 段 落 是 文章 的 基 
本 单位 ， 同 样 也 是 网 页 的 基本 单位 。 段 落 的 放置 与 效果 的 显示 会 直接 影响 页 面 的 布局 及 风格 。 
CSS 样式 表 提供 了 文本 属性 来 实现 对 页 面 中 段落 文本 的 控制 。 


7.3.1 单词 间隔 word-spacing 


单词 之 间 的 间隔 如 果 设 置 合理 ， 就 会 给 整个 网 页 布局 节省 空间 ， 二 者 可 以 给 人 赏心悦目 的 
感觉 ， 提 高 阅读 效率 。 在 CSS3 中 ， 可 以 使 用 word-spacing 直接 定义 指定 区 域 或 者 段落 中 字符 
之 间 的 间隔 。 

word-spacing 属性 用 于 设 定 词 与 词 之 间 的 间距 ， 其 语法 格式 如 下 所 示 。 


word-spacing:normal|length 


其 中 ， 属 性 值 normal 和 length 的 含义 如 表 7-9 所 示 。 


表 7-9 单词 间隔 属性 值 


【 例 7.12】 《实例 文件 ，ch07\7.12.html) 


<!DOCTYPE html> 

<html> 

<body> 

<p style="word-spacing:normal">Welcome to my home</p> 
<p style="word-spacing:15px">Welcome to my home</p> 
<p style="word-spacing:15px"> 欢 迎 来 中 国旅 游 </p> 

</body> 

</html> 


在 正 11.0 中 的 浏览 效果 如 图 7-12 所 示 ， 段 落 中 单词 以 不 同 间隔 显示 。 


- oO x 
| 避 DERKEVode 图 - C 的 
|§ ostmvode xx 加 

寡人- 下 , $008 


Welcome to my home 
Welcome to my home 


欢迎 来 中 国旅 游 


图 7-12 设 定 词 间隔 显示 
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从 上 面 的 显示 结果 可 以 看 出 ，word-spacing 属性 不 能 用 于 设 定 文字 之 间 的 间隔 。 
7.3.2 字符 间隔 letter-spacing 


在 一 个 网 页 中 还 可 能 涉及 多 个 字符 文本 ， 将 字符 文本 之 间 的 间距 设置 和 词 间隔 保持 一 致 ， 
进而 保持 页 面 的 整体 性 ， 这 是 网 页 设计 者 必须 完成 的 。 词 与 词 之 间 可 以 通过 word-spacing 进行 
设置 ， 那 么 字符 之 间 使 用 什么 设置 呢 ? 

在 CSS3 中 ， 可 以 通过 letter-spacing 来 设置 字符 文本 之 间 的 距离 ， 这 里 允许 使 用 负 值 ， 可 
让 字符 之 间 更 加 紧凑 。 其 语法 格式 如 下 所 示 。 


letter-spacing:normal|length 
其 属性 值 含义 如 表 7-10 所 示 。 
表 7-10 ”字符 间隔 属性 值 


默认 间隔 ， 即 以 字符 之 间 的 标准 间隔 显示 
由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 允 许 为 负 值 


【 例 7.13】〔 实 例文 件 ，ch07\7.13.html) 


<!DOCTYPE html> 

<html> 

<body> 

<p style="letter-spacing:normal">Welcome to my home</p> 
<p style="letter-spacing:5px">Welcome to my home</p> 
<p style="letter-spacing:1lex"> 这 里 的 字 间 距 是 lex</p> 

<p style="letter-spacing:-lex"> 这 里 的 字 间 距 是 -lex</p> 

<p style="letter-spacing:1lem"> 这 里 的 字 间 距 是 lem</p> 
</body> 

</html> 


在 正 11.0 中 的 浏览 效果 如 图 7-13 所 示 ， 文 字 间距 以 不 同 大 小 显示 。 


- 日 x 
全 DF9REodeY -0 || 提示 
[8 DvreBvodevRte. x 四 

高 下， Gain 


Welcome to my home 


Welcome to my home 
这 里 的 字 间 距 是 1ex 
的 对 


这 里 的 字 间 距 是 1 em 


图 7-13 字 间 距 效果 
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从 上 述 代 码 中 可 以 看 出 ， 通 过 letter-spacing 定义 了 多 个 字 间距 的 效果 。 特别 注意 ， 
时 WE 于 引 当 设置 的 字 间 距 为 负 值 时 ， 所 有 文字 就 会 粘 到 一 块 。 
7.3.3 ”文字 修饰 text-decoration 


在 网 页 文本 编辑 中 ， 有 的 文字 需要 突出 重点 ， 告 诉 读者 这 段 文本 很 重要 ， 往 往 会 给 文字 增 
加 下 画 线 、 上 画 线 或 者 增加 删除 线 效果 ， 从 而 吸引 读者 的 眼球 。 在 CSS3 中 ，text-decoration 属 
性 是 文本 修饰 属性 ， 可 以 为 页 面 提供 多 种 文本 的 修饰 效果 ， 例 如 下 画 线 、 删 除 线 、 闪 烁 等 。 

text-decoration 属性 语法 格式 如 下 所 示 。 


text-decoration:none|lunderline|blink|overline|line-through 
其 属性 值 含义 如 表 7-11 所 示 。 
表 7-11 文字 修饰 属性 值 


属性 值 描述 

none 默认 值 ， 对 文本 不 进行 任何 修饰 
underline 下 画 线 

overline 上 夯 线 

line-through 删除 线 

blink 闪烁 


【 例 7.14】 《实例 文件 :ch07\7.14.html) 


<!DOCTYPE html> 
<html> 
<body> 
<p style="text-decoration:none"> 人 总 是 在 接近 幸福 时 倍 感 幸福 ! </p> 
<p style="text-decoration:underline"> 人 总 是 在 接近 幸福 时 倍 感 幸福 ! </p> 
<p style="text-decoration:overline"> 人 总 是 在 接近 幸福 时 倍 感 幸福 ! </p> 
<p style="text-decoration:1line-through"> 人 总 是 在 接近 幸福 时 倍 感 幸福 ! </p> 
<p style="text-decoration:blink"> 人 总 是 在 接近 幸福 时 倍 感 幸福 ! </p> 
</body> 
</html> 


在 正 11.0 中 的 显示 效果 如 图 7-14 所 示 ， 段 落 中 出 现 了 下 画 线 、 上 画 线 和 删除 线 等 。 
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- DO x 
弛 。D:\ 本 书 源 代码 \codej 国 ~ 搜索 .. 
夸 ”D:\ 本 书 源 代 码 vode\ 源 代 . x | 上 
疯 当 百度 一 下 ， 你 就 知道 


人 总 是 在 接近 幸福 时 倍 感 幸福 ! 
十 倍 感 幸福 ! 
人 总 是 在 接近 盏 和 福 时 倍 感 容 福 1 


六 且 存 校 近 去 短 


总 是 在 接近 幸福 


人 总 是 在 接近 幸福 时 倍 感 幸福 ! 


图 7-14 文本 修饰 显示 


这 里 需要 注意 的 是 :blink 闪烁 效果 只 有 少数 浏览 器 支持 ， 而 IE 等 其 他 大 多 数 浏览 
EE 器 (如 Opera) 都 暂 不 支持 。 


7.3.4 ”垂直 对 齐 方式 vertical-align 


在 网 页 文本 编辑 中 ,对 齐 有 很 多 方式 ， 文字 排 在 一 行 的 中 央 位 置 叫 居中 对 齐 ， 文章 的 标题 
和 表格 中 的 数据 一 般 都 居中 排列 。 有 时 还 要 求 文字 垂直 对 齐 ， 即 文字 顶部 对 齐 或 者 底部 对 齐 。 
在 CSS 中 ,可 以 直接 使 用 vertical-align 属性 来 定义 ， 用 来 设 定 垂直 对 齐 方式 。 该 属性 定义 
行内 元 素 的 基线 相对 于 该 元 素 所 在 行 的 基线 的 垂直 对 齐 ， 允 许 指定 负 长 度 值 和 百分比 值 。 这 会 
使 元 素 降低 而 不 是 升 高 。 在 表格 中 ， 这 个 属性 可 以 用 来 设置 单元 格 内 容 的 对 齐 方式 。 
vertical-align 属性 语法 格式 如 下 所 示 。 


{vertical-align: 属 性 值 } 
vertical-align 属性 值 如 表 7-12 所 示 。 


表 7-12 ”垂直 对 齐 方 式 属性 值 


属性 值 说 明 

baseline 默认 ， 元 素 放 置 在 父 元 素 的 基线 上 
sub 垂直 对 齐 文本 的 下 标 

super 垂直 对 齐 文本 的 上 标 


top | 把 元 素 的 顶端 与 行 中 最 高 元 素 的 项 端 对 齐 
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( 续 表 ) 
属性 值 说 明 
text-top 把 元 素 的 顶端 与 父 元 素 字 体 的 顶端 对 齐 
middle 把 此 元 素 放置 在 父 元 素 的 中 部 
bottom 把 元 素 的 顶端 与 行 中 最 低 的 元 素 的 顶端 对 齐 
text-bottom ”| 把 元 素 的 底 端 与 父 元 素 字体 的 底 端 对 齐 
length 设置 元 素 的 堆 炙 顺 序 
% 使 用 "line-height" 属性 的 百分比 值 来 排列 此 元 素 ， 人 允许 使 用 负 值 


【 例 7.15】 《实例 文件 : ch07\7.15.html) 


<!DOCTYPE html> 
<html> 
<body> 
<p> 世 界 杯 <b style="font-size:8pt;vertical-align:super">2018</b>! 
中 国 队 <b style="font-size:8pt;vertical-align:sub">[ 注 ] </b>! 
加 油 ! <img src="1.gif" style="vertical-align:baseline"></p> 
<p><img src="2.gif" style="vertical-align:middle"/> 
世界 杯 ! 中 国 队 ! 加 油 ! <img src="1.gif" style="vertical-align:top"> 
</p><hr> 
<p><img src="2.gif" style="vertical-align:middle"/> 
世界 杯 ! 中 国 队 ! 加 油 ! <img src="1.gif" style="vertical-align:text-top"> 
</p> 
<p><img src="2.gif" style="vertical-align:middle"/> 
世界 杯 ! 中 国 队 ! 加 油 ! <img src="1.gif" style="vertical-align:bottom"> 
</p> 
<hr> 
<p><img src="2.gif" style="vertical-align:middle"/> 
世界 杯 ! 中 国 队 ! 加 油 ! <img src="1.gif" style="vertical-align:text-bottom"> 
</p> 
<p> 
世界 杯 <b style="font-size:8pt;vertical-align:100%">2018</b>! 
中 国 队 <b style="font-size: 8pt;vertical-align:-100%">[ 注 ]</b>! 
加 油 ! <img src="1.gif" style="vertical-align:baseline"> 
</p> 
</body> 
</html> 


在 正 11.0 中 的 浏览 效果 如 图 7-15 所 示 ， 图 文 在 垂直 方向 以 不 同 的 对 齐 方式 显示 。 
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世界 可 中 国 队 gy 

1 世界 杯 ! 中 国 队 

总 世界 杯 ! 中 国 队 ! 加 油 ! -4 
a 可 


] 世界 杯 ! 中 国 队 ! 加 油 ! 


图 7-15 垂直 对 齐 显示 


从 上 面 的 实例 中 可 以 看 出 ， 上 下 标 在 页 面 中 的 数学 运算 或 注释 标号 使 用 的 比较 多 。 顶 端 对 
齐 有 两 种 参照 方式 , 一 种 是 参照 整个 文本 块 , 一 种 是 参照 文本 。 底 部 对 齐 与 顶端 对 齐 方 式 相同 ， 
分 别 参 照 文本 块 和 文本 块 中 包含 的 文本 。 


vertical-align 属性 值 还 能 使 用 百分比 来 设 定 王 直 高 度 。 该 高 度 具有 相对 性 ， 是 基于 
EEa5E aa 行 高 的 值 来 计算 的 。 百 分 比 还 能 使 用 正 负 号 ， 正 百分比 使 文本 上 升 ， 负 百分比 使 文 
本 下 降 . 


7.3.5 文本 转换 text-transform 

根据 需要 将 小 写字 母 转换 为 大 写字 母 或 者 将 大 写字 母 转 换 为 小 写字 母 , 在 文本 编辑 中 都 是 
很 常见 的 。 在 CSS 样式 中 ， 其 中 text-transform 属性 可 用 于 设 定 文本 字体 的 大 小 写 转 换 。 
text-transform 属性 语法 格式 如 下 所 示 。 


text-transform:none|capitalize|uppercase|lowercase 


其 属性 值 含义 如 表 7-13 所 示 。 


表 7-13 文本 转换 属性 值 


无 转换 发 生 
将 每 个 单词 的 第 一 个 字母 转换 成 大 写 ， 其 余 无 转换 发 生 
转换 成 大 写 
转换 成 小 写 


none 


capitalize 


| uppercase 


lowercase 


文本 转换 属性 仅 作用 于 字母 型 文本 ， 相 对 来 说 比较 简单 。 


< 
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【 例 7.16】“《 实 例文 件 : ch07\7.16.html) 


<!DOCTYPE html> 

<html> 

<body style="font-size:15pt;font-weight:bold"> 

<p style="text-transform:none">welcome to beijing</p> 

<p style="text-transform:capitalize">welcome to beijing</p> 
<p style="text-transform:lowercase">WELCOME TO BEIJING</p> 
<p style="text-transform:uppercase">welcome to beijing</p> 
</body> 

</html> 


在 正 11.0 中 的 浏览 效果 如 图 7-16 所 示 ， 大 小 写字 母 转换 显示 。 


- Oo x 
加 DA 本 十 沸 代码 \code\ 图 ”中 | 按 末 -… 

| Dt-tmemvcode\mrt.. * 站 

亩 全 百 谋 一 下 ,KRI 


Welcome to beijing 
Welcome To Beijing 
Welcome to beijing 


WELCOME TO BEIJING 


图 7-16 ”大 小 写字 母 转换 显示 


7.3.6 ”水平 对 齐 方式 text-align 

一 般 情况 下 ， 居 中 对 齐 适用 于 标题 类 文本 ， 其 他 对 齐 方式 可 以 根据 页 面 布 局 来 选择 使 用 。 
可 以 根据 需要 设置 多 种 对 齐 ， 例 如 水 平方 向 上 的 居中 、 左 对 齐 、 右 对 齐 或 者 两 端 对 齐 等 ， 在 
CSS 中 可 以 通过 text-align 属性 进行 设置 。 

text-align 属性 用 于 定义 对 象 文本 的 对 齐 方式 .与 CSS2 相 比 ,CSS3 增加 了 start、end 和 string 
属性 值 。text-align 语法 格式 如 下 所 示 。 


{text-align: 属 性 值 } 
其 属性 值 含义 如 表 7-14 所 示 。 
表 7-14 水平 对 齐 方式 属性 值 


属性 值 说 明 
start 文本 向 行 的 开始 边缘 对 齐 
end 文本 向 行 的 结束 边缘 对 齐 
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( 续 表 ) 
属性 值 说 明 
left 文本 向 行 的 左边 缘 对 齐 。 在 垂直 方向 的 文本 中 ， 文 本 在 left-to-right 模式 下 向 开始 边缘 
对 齐 
Tight 文本 向 行 的 右边 缘 对 齐 。 在 垂直 方向 的 文本 中 ， 文 本 在 left-to-right 模式 下 向 结束 边缘 
对 齐 
center 文本 在 行内 居中 对 齐 
justify 文本 根据 text-justify 的 属性 设置 方法 分 散 对 齐 ， 即 两 端 对 齐 ， 均 匀 分 布 


match-parent | 继承 父 元 素 的 对 齐 方式 ,但 有 一 个 例外 :继承 的 start 或 者 end 值 是 根据 父 元 素 的 direction 


值 进行 计算 的 ， 因 此 计算 的 结果 可 能 是 left 或 者 right 


<string> string 是 一 个 单个 的 字符 ， 否 则 就 忽略 此 设置 。 按 指定 的 字符 进行 对 齐 。 此 属性 可 以 跟 


其 他 关键 字 同 时 使 用 ， 如 果 没 有 设置 字符 ， 那 么 默认 值 是 end 方式 
inherit 继承 父 元 素 的 对 齐 方式 


在 新 增加 的 属性 值 中 ，start 和 end 属性 值 主要 是 针对 行内 元 素 的 〈 在 包含 元 素 的 头 部 或 尾 


部 显示 ) ， 而 <string> 属 性 值 主要 用 于 表格 单元 格 中 ， 将 根据 某 个 指定 的 字符 对 齐 。 


【 例 7.17】〔 实 例文 件 ，ch07\7.17.html) 


<!DOCTYPE html> 

<html> 

<body> 

<hl style="text-align:center"> 登 师 州 台 歌 </h1> 
<h3 style="text-align:left"> 选 自 : </h3> 

<h3 style="text-align:right"> 

<img src="1.gif"/> 唐 诗 三 百 首 </h3> 

<p style="text-align:justify"> 

前 不 见 古 人 后 不 见 来 者 (这 是 一 个 测试 ， 这 是 一 个 测试 ， 这 是 一 个 测试 
</p> 

<p style="text-align:strat"> 念 天 地 之 悠悠 </p> 
<p style="text-align:end"> 独 恰 然 而 涕 下 </p> 
</body> 

</html> 


在 正 11.0 中 的 浏览 效果 如 图 7-17 所 示 ， 文 字 在 水 平方 向 上 以 不 同 的 对 齐 方式 显示 。 


text-align 属性 只 能 用 于 文本 块 ， 而 不 能 直接 应 用 到 图 像 标记 <img>。 如 果 要 使 图 像 同 文本 


一 样 应 用 对 齐 方式 ， 就 必须 将 图 像 包 含 在 文本 块 中 。 如 例 7.17， 由 于 向 右 对 齐 方式 作用 了 
标记 定义 的 文本 块 ， 图 像 包 含 在 文本 块 中 ， 因 此 图 像 能 够 同文 本 一 样 向 右 对 齐 。 


上 <h3> 
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CSS 只 能 定义 两 端 对 齐 方式 , 但 对 于 具体 的 两 端 对 齐 文本 如 何 分 配 字体 空间 以 实现 
文本 左右 两 边 均 对 齐 ，CSS 并 不 规定 ， 这 就 需要 设计 者 自行 定义 了 
巧 提示 


SS 
DvPSRRRNcodeWRHBhO77 二 ”CC | 从 Dp- 产 侈 便 
三 De 本 忆 涯 fode\ 芋 f_ 3 
A 
全 
登 幽 州 台 歌 

选 自 : 

Pe 

入 店 诗 三 百 首 
前 不 见 古 人 后 不 见 来 者 (这 是 一 个 测试 ， 这 是 一 个 测试 ， 这 是 一 个 测试 ) 
念 天 地 之 悠悠 
独 愉 然 而 涕 下 


图 7-17 对 齐 效果 图 


7.3.7 文本 缩 进 text-indent 


在 普通 段落 中 ， 通 常 首 行 缩 进 两 个 字符 ， 用 来 表示 这 是 一 个 段落 的 开始 。 同 样 在 网 页 的 文 
本 编辑 中 可 以 通过 指定 属性 来 控制 文本 缩 进 。CSS 的 text-indent 属性 可 用 来 设 定 文本 块 中 首 行 
的 缩 进 。 

text-indent 属性 语法 格式 如 下 所 示 。 


text-indent:length 


其 中 ，length 属性 值 表 示 有 百分比 数字 或 有 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 允 许 
为 负 值 。 可 以 这 样 认为 ，text-indent 属性 可 以 定义 两 种 缩 进 方式 ， 一 种 是 直接 定义 缩 进 的 长 度 ， 
另 一 种 是 定义 缩 进 百分比 。 使 用 该 属性 ，HTML 任何 标记 都 可 以 让 首 行 以 给 定 的 长 度 或 百分比 


【 例 7.18】“〔 实 例文 件 ，ch07\7.18.html) 


<!DOCTYPE html> 

<html> 

<body> 

<p style="text-indent:30mm"> 
此 处 直接 定义 长 度 ， 直 接 缩 进 。 
</p> 

<p style="text-indent:10%"> 
此 处 使 用 百分比 ， 进 行 缩 进 。 

</p> 

</body> 

</html> 
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在 正 11.0 中 的 浏览 效果 如 图 7-18 所 示 ， 文 字 以 首 行 缩 进 方式 显示 。 


- 0 x 
矢 ”D:\ 本 书 源 代码 \code 详 图 ”| 搜索- 

碟 D:\ 本 书 源 代码 \code\ 源 代 .. x | 

雇 汪 百 度 - 下 , 你 M0 道 


此 处 直接 定义 长 度 ， 直 接 缩 进 。 
此 处 使 用 百分比 ， 进 行 缩 进 。 


图 7-18 缩 进 显示 窗口 
如 果 上 级 标记 定义 了 text-indent 属性 ， 那 么 子 标记 可 以 继承 其 上 级 标记 的 缩 进 长 度 。 
7.3.8 文本 行 高 line-height 
在 CSS 中 ，line-height 属性 用 来 设置 行 间距 ， 即 行 高 。 其 语法 格式 如 下 所 示 。 
line-height:normal1length 
其 属性 值 的 具体 含义 如 表 7-15 所 示 。 
表 7-15 文本 行 高 属性 值 


默认 行 高 ， 即 网 页 文本 的 标准 行 高 


百分比 数字 或 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 允 许 为 负 值 。 其 百分比 取 值 基于 字 
体 的 高 度 尺寸 


【 例 7.19】〔 实 例文 件 ，ch07\7.19.html) 


<!DOCTYPE html> 
<html> 
<body> 
<div style="text-indent:1l0mm;"> 
<p style="line-height:50px"> 
世界 杯 (World Cup, FIFA World Cup) ， 国 际 足 联 世界 杯 ， 世 界 足球 锦标 赛 ) 是 世界 上 最 
高 水 平 的 足球 比赛 ， 与 奥运 会 、F1 并 称 为 全 球 三 大 顶级 赛事 。 
</p> <p style="line-height:50%"> 
世界 杯 (World Cup, FIFA World Cup) ， 国 际 足 联 世界 杯 ， 世 界 足 球 锦标 赛 ) 是 世界 上 最 
高 水 平 的 足球 比赛 ， 与 奥运 会 、F1 并 称 为 全 球 三 大 顶级 赛事 。 
</p> 
</div> 
</body> 
</html> 


在 正 11.0 中 的 浏览 效果 如 图 7-19 所 示 ， 有 段 文 字 重 谷 在 一 起 ， 是 因为 行 高 设置 过 小 。 
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下 DERKEcoded 国 - G|| 加 万 - | 
| DvrBcodevart.. x 
请 ER 下, ene 


世界 杯 〈World Cup, FIFA World Cup》， 国 际 足 联 世界 杯 ， 世 界 
足球 锦标 赛 ) 是 世界 上 最 高 水 平 的 足球 比赛 ， 与 奥运 会 、F1 并 称 为 全 球 
三 大 项 级 赛事 - 


ey A 


图 7-19 设 定 文本 行 高 显示 图 


7.3.9 处 理 空白 white-space 


在 文本 编辑 中 ， 网 页 中 有 时 需要 包含 一 些 不 必要 的 制 表 符 、 换 行 符 或 者 额外 的 空白 符 〈 多 于 
单词 之 间 的 一 个 标准 空格 ) ， 这 些 符号 统称 为 空白 字符 。 通 常情 况 下 浏览 器 可 以 自动 忽略 这 些 额 
外 的 空白 字符 并 按照 一 种 适合 窗口 的 方式 布置 文本 。 它 会 丢弃 段落 开头 和 结尾 处 任何 额外 的 空白 ， 
并 将 单词 之 间 的 所 有 制 表 符 、 换 行 和 额外 的 空白 压缩 〈 合 并 ) 成 单一 的 空白 字符 。 此 外 ， 当 用 户 
调整 窗口 大 小 时 浏览 器 会 根据 需要 重新 格式 化 文本 以 便 匹 配 新 的 窗口 尺寸 。 对 于 某 些 元 素 ， 可 能 
会 以 某 种 方式 特意 格式 化 文本 ， 以 便 包含 额外 的 空白 字符 ， 而 不 抛弃 或 压缩 这 些 字符 。 

在 CSS 中 ，white-space 属性 用 于 设置 对 象 内 空格 字符 的 处 理 方式 ， 该 属性 对 文本 的 显示 
有 着 重要 的 影响 ,在 标记 上 应 用 white-space 属性 可 以 影响 浏览 器 对 字符 串 或 文本 间 空 白 的 处 理 
方式 。 

white-space 属性 语法 格式 如 下 所 示 。 


T 


white-space:normal1prelnowrap1pre-wrap1pre-1line 
其 属性 值 含义 如 表 7-16 所 示 。 
表 7-16 ”处 理 空白 属性 值 


属性 值 说 明 

normal 默认 ， 空 白 会 被 浏览 器 忽略 

pre 空白 会 被 浏览 器 保留 ， 其 行为 方式 类 似 HTML 中 的 <pre> 标记 
nowrap 文本 不 会 换行 ， 文 本 会 在 同一 行 上 继续 ， 直 到 遇 到 <br/> 标记 为 止 
pre-wrap 保留 空白 符 序 列 ， 但 是 正常 地 进行 换行 

pre-line 合并 空白 符 序列 ， 但 是 保留 换行 符 

inherit 规定 应 该 从 父 元 素 继承 white-space 属性 的 值 
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【 例 7.20】〔 实 例文 件 : ch07\7.20.html) 
<!DOCTYPE html> 
<html> 
<body> 
<hl style="color:red; text-align:center;white-space:pre"> 科 学 发 展 
观 ! </h1> 
<div> 
<p style="white-space:nowrap;text-indent:10mm"> 
重视 农业 、 农 村 、 农 民 问 题 是 中 国共 产 党 一 贯 的 战略 思想 。<br/> 
“三 农 ” 问 题 始终 是 关系 党 和 人 民事 业 发 展 的 全 局 性 、 根 本 性 问题 ， 农 业 丰 则 基础 强 ， 农 民 富 则 国 
家 盛 ， 农 村 稳 则 社会 安 。” 
</p> 
<p style="white-space:pre-wrap;text-indent:10mm"> 
重视 农业 、 农 村 、 农 民 问 题 是 中 国共 产 党 一 贯 的 战略 思想 。“ 三 农 ” 问 题 始 终 是 关系 党 和 人 民 
事业 发 展 的 全 局 性 、 
根本 性 问题 ， 农 业 丰 则 基础 强 ，<br/> 
农民 富 则 国家 盛 ， 农 村 稳 则 社会 安 。 
</p> 
<p style="white-space:pre-line;text-indent:10mm"> 
重视 农业 、 农 村 、 农 民 问 题 是 中 国共 产 党 一 贯 的 战略 思想 。“ 三 农 ” 问 题 始 终 是 关系 党 和 
人 民事 业 发 展 的 全 局 性 、 
根本 性 问题 ， 农 业 丰 则 基础 强 ，<br/> 
农民 富 则 国家 盛 ， 农 村 稳 则 社会 安 。 
</p> 
</div> 
</body> 
</html> 


在 Firefox 中 的 浏览 效果 如 图 7-20 所 示 ， 从 中 可 以 看 到 文字 处 理 空白 的 不 同方 式 。 


CE 
ED © 


赂 因 址 。 
本 性 问题 ， 农 业 二 则 基础 强 ， 农 民 高 则 国家 灵 ,| 


中 国共 产 党 一 质 的 战略 思想 。“ 三 农 ”问题 始终 是 关系 党 和 人 民事 


上 产 党 一 咎 的 战略 思想 。 “三 农 ”问题 始终 是 关系 营 和 人 民事 业 发 展 


图 7-20 处理 空白 显示 


7.3.10 ”文本 反 排 unicode-bidi 和 direction 
在 网 页 文本 编辑 中 , 通常 英语 文档 的 基本 方向 是 从 左 至 右 。 如 果 文 档 中 某 一 段 的 多 个 部 分 
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包含 从 右 至 左 阅 读 的 语言 ， 此 时 可 以 通过 CSS 提供 的 两 个 属性 unicode-bidi 和 direction 解决 这 
个 文本 反 排 的 问题 。 
unicode-bidi 属性 语法 格式 如 下 所 示 。 


unicode-bidi:normal|bidi-override|embed 
其 属性 值 含义 如 表 7-17 所 示 。 


表 7-17 unicode-bidi 属性 值 


属性 值 说 明 

Normal 默认 值 。 元 素 不 会 打开 一 个 额外 的 嵌入 级 别 。 对 于 内 联 元 素 ， 隐 式 地 重 
新 排序 将 跨 元 素 边 界 起 作用 

bidi-override 与 embed 值 相同 ， 但 除 此 之 外 ， 在 元 素 内 ，direction 属性 将 严格 按 顺 
序 进行 排序 。 此 值 苦 代 隐 式 双向 算法 

embed 元 素 将 打开 一 个 额外 的 嵌入 级 别 。direction 属性 的 值 指定 嵌入 级 别 。 重 
新 排序 在 元 素 内 是 隐 式 进行 的 


direction 属性 用 于 设 定 文本 流 的 方向 ， 其 语法 格式 如 下 所 示 。 
direction:ltr|rtl|inherit 
其 属性 值 含义 如 表 7-18 所 示 。 

表 7-18 direction 属性 值 


文本 流 从 右 到 左 


F inherit | 文本 流 的 值 不 可 继承 | 


【 例 7.21】《 实 例文 件 : ch07\7.21.html) 


<!DOCTYPE html> 

<html> 

<head> 

<style type="text/css"> 
.a{direction:rtl;unicode-bidi:bidi-override;text-align:1left} 
</style> 

</head> 

<body> 

<h3> 纯 CSS 反 转 字符 串 使 用 了 direction 和 unicode-biqdi</h3> 
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<div class=a> 秋 风 吹 不 尽 ， 总 是 玉 关 情 。 
</div> 
</body> 
</html> 


在 正 11.0 中 的 浏览 效果 如 图 7-21 所 示 ， 文 字 以 反 转 形式 显示 。 


ja La! x 
加 ”DA 本 书 源 代码 \code 业 轿 ~ 中 | 搜索 -. Pp- 
导 DF 世代 于 \code\ 尖 亿 -了 
底 EE 下 , fr 


纯 CSS 反 转 字符 串 使 用 了 direction 和 unicode-bidi 
。 情 关 玉 是 总 ， 尽 不 吹风 秋 


图 7-21 文本 反 转 显示 


7.4 综合 实例 1 一 一 制作 旅游 宣传 网 页 


在 前 面 小 节 中 主要 介绍 了 关于 文字 和 段落 方面 的 CSS 属性 设置 ， 在 本 节 中 将 利用 上 面 的 
知识 创建 一 个 旅游 宣传 网 页 ， 充 分 利用 CSS 对 图 片 和 文字 的 修饰 方法 ， 实 现 页 面 效果 。 具 体操 
作 步骤 如 下 : 

[加 分 析 需 求 

本 综合 实例 要 求 在 网 页 的 最 上 方 显示 出 标题 ， 标 题 下 方 是 正文 ， 其 中 正文 部 分 是 图 片 和 文 
字段 落 部 分 。 上 述 要 求 使 用 CSS 样式 属性 实现 ， 其 实例 效果 图 如 图 7-22 所 示 。 


Ov coco mechoNnen, -0 mr 万 . 


去 名山 乾 万 史 申 入 ， 人 文 六 相让 家 .加 考 二 台山 时 在 东汉 时 着 就 
有 沸 王 及 其 名 到 上 采风。 于 号 ， 本 时 不 少 名 二 下 得 丰 、 隐 因 ， 得 宁 
有 时 受 人 和 育 归 ， 才 处 寻 建 培 ， 龙 贡 是 六 来 以 后 ， 云 台山 成 了 文人 时 入 
册 于 水、 读 尘 办 省 的 主 要 去 处 之 一 由 代 诗人 王 检 妆 在 此 竺 下 了 " 委 在 异乡 
为 并 者， 各 过 人 季候 亲 ， 和 和 兄弟 有 处 ， 池 乡 匠 英 少 一 人 "的 下 训 抱 
ee 
献 凋 陆 、- 价 林 七 " 隐 生 处 ~- 百 家 尖 条 六 师 在 此 地 、 -= 
A 
于 0 世纪 0 年 代 初 并 甸 经 车 开发 并 对 外 捷 和 于 完 。1994 年 1 月 0 日 关 国 
务 院 列 为 国家 重点 风 虹 名胜区， 一 日 拓 村 萌 客 最高 达 39 
万 人 。 纤 直 近 一 二 年 的 开发 往复, 小 和 区 内 现 有 老者 


神农 山 风 虹 名 星 区 。 是 仙界 地 质 公司 、 履 办 自然 基金 组 织 A 地 优先 保 


护 芭 、 国 家 AAA 抽风 晤 旅游 芭 、 国 家 级 各 自然 保 括 、 有 有 级 和 条 基 
她， 它 位 于 包 阴 市 城区 两 共 23 公 时 的 太行 山 苇 ， 共 有 八大 时 区 136 个 革 
总 。 占 地 总 面积 6 平方 公里 。 主 几 条 全 项 洒 拓 1028 米 ， 症 立 中 天 ， 气 煌 
失语， 三 大 天 门 比 奉 山 时 1s4 年 。 这 里 从 是 瘟神 家 状 百 苍 。 全 百 吉 会 
二 皮 天 的 半 地 ;也是 者 给 人 沦 子 入 练 乒 大通 仙 逢 之 所 。 古 往 今 来 
fa 促 闫 的 自然 网 现 引 不 少 着 王将 相 。 文 人 时 窜 有 4t 尘 复 。 让 明显 本 隆基 、 
蒜 会 、 李 高 隐 等 历代 名家 内 在 此 而 下 许多 传 伺 佳作， 这 里 夸 坷 队 几 的 林 


kh 侈 二 更 天 下 一 衣 的 折枝 乓 1S609 人 栖 揣 欠 松 妆 太 万 和。 风 捕 万 种 


年 四季 妈 不 同 ， 奉 省 析 花 估 浊 . 帮 看 天象 浪 、 罗 可 满 山 HTst、 生 东芝 玉龙 。 汶 直 其 辣 ， 称 光 果 。 习 着 人 问 他 境 ， 信 人 中 
二 贡 动 . 陡然 开 华 


图 7-22 旅游 宣传 网 页 
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L@ 到 编写 indexhtml 文件 


该 页 面 中 每 个 景点 的 介绍 都 包括 景点 图 片 、 景 点 图 片 说 明 及 景点 介绍 ,用 HIMLS 的 article 
表示 一 个 景点 、figure 表示 景点 图 片 和 说 明 ， 景 点 介绍 使 用 段落 p，index.html 文件 结构 如 下 : 


<!DOCTYPE html> 

<head> 

<meta charset="utf-8" /> 

<title> 河 南 焦作 景点 介绍 </title> 

<link type="text/css" rel="stylesheet" href="css.css" /> 

</head> 

<body> 

<section> 

<h5> 景 点 介绍 </h5> 
<article> 
<figure> 
<img src="images/ 焦 作 青 龙 峡 3.jpg" width="220" height="140" /> 
<figcaption> 
云 台山 
</figcaption> 
</figure> 
<p> 云 台山 游览 历史 悠久 ， 人 文 景观 丰富 。 据 考 ， 云 台山 早 在 东汉 时 期 就 有 帝王 及 其 皇室 

到 此 采风 、 避 里， 魏 晋 时 不 少 名 士 来 此 人 避难、 隐居， 唐宁 时 受 佛教 青睐 ， 多 处 建 寺 建 塔 。 尤 其 是 唐 宋 以 
后 ， 云 台山 成 了 文人 墨客 游 山 玩 水 、 谈 诗 论 道 的 主要 去 处 之 一 。 唐 代 诗人 王 维 曾 在 此 留 下 了 “ 独 在 异乡 
为 异 客 ， 每 着 佳节 倍 思 亲 。 遥 知 兄弟 登高 处 ， 遍 插 荣 黄 少 一 人 ”的 千古 绝唱 。 目 前 ， 保 留 或 正在 修复 的 
遗迹 及 其 他 人 文 景观 有 东汉 黄帝 刘 协 墓 -- 汉 献 帝 陵 、“ 竹 林 七 贤 ” 隐 居 处 -- 百 家 岩 稠 禅师 在 此 建 
寺 、 孙 思 旷 炼 药 处 -- 药 王 洞 、 王 维 做 诗 处 -- 元 贞观 ， 以 及 万 善 夺 、 影 寺 等 。 云 台山 风景 游览 区 于 
20 世纪 80 年 代 初 开始 经 营 开发 并 对 外 接待 游客 。 1994 年 1 月 10 日 被 国务 院 列 为 国家 重点 风景 名 胜 
区 。 一 年 四 季 游 客 不 断 ， 日 接待 游客 最 高 达 3 .9 万 人 。 经 过 近 二 十 年 的 开发 和 修复 ， 游 览 区 内 现 有 老 
潭 沟 …*…</p> 


</article> 


<article> 
<figure> 
<img src="images/ 焦 作 影 视 城 .jpg" width="220" height="140" /> 
<figcaption> 
神农 山 
</figcaption> 
</figure> 
<p> 神 农 山 风景 名 胜 区 ， 是 世界 地 质 公 园 、 世 界 自然 基金 组 织 A 级 优先 保护 区 、 国 家 AAAA 
级 风景 旅游 区 、 国 家 级 猕猴 自然 保护 区 、 省 级 科普 基地 ， 它 位 于 沁 阳 市 城区 西北 23 公 里 的 太行 山 欧 ， 共 
有 八大 景区 136 个 景点 ， 占 地 总 面积 为 96 平 方 公 里 。 主 峰 紫金 顶 海拔 1028 米 ， 瘟 立 中 天 ， 气 势 雄 浑 ; 
三 大 天 门 比 泰 山 早 154 年 。 这 里 曾 是 炎帝 神农 辨 百 谷 ， 尝 百草 ， 登 坛 祭 天 的 圣地 ; 也 是 道教 创始 人 老子 
筑 炉 炼丹 、 成 道 仙 升 之 所 ， 古 往 今 来 ， 优 美的 自然 风光 吸引 不 少帝 王将 相 、 文 人 墨客 到 此 游览 ， 唐 明 皇 
李 隆 基 、 韩 愈 、 李 商 隐 等 历代 名 家 曾 在 此 留 下 许多 传世 佳作 。 这 里 有 雄 奇 险峻 的 紫金 坛 ， 更 有 天 下 一 绝 
的 白松 岭 。15600 余 株 白 稚 松 姿态 万 千 、 风 情 万 种 、 娴 娜 多 姿 地 生长 于 悬崖 绝 岭 之 识 ， 居 世界 五 大 美人 
松 之 首 。 神农 山 一 年 四 季 景 色 不 同 ， 春 赏 桃花 烂漫 、 夏 看 流 泉 飞 瀑 、 秋 观 满 山 红叶 、 冬 览 冰箱 玉龙 ， 游 
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走 其 间 ， 移 步 换 景 ， 忱 车 人 间 仙 境 ， 令 人 掀 怪 魂 动 ， 陡 然 升华 ……</p> 


</article> 


<article> 
<figure> 
<img src="images/ 焦 作 青 龙 峡 .jpg" width="220" height="140" /> 
<figcaption> 
群英 湖 
</figcaption> 
</figure> 
<p> 群 英 湖 风景 名 胜 区 地 处 太行 山 前 沿 , 面积 约 25 平 方 公里 ， 跨 越 焦作 市 区 、 修 武 县 、 博 
爱 县 与 山西 省 晋城 市 地 界 。 群英 湖 风景 区 内 景点 集中 ， 分 布 均匀 。 河 流 、 湖 泊 深 秀 ， 高 山 、 峡 谷 险峻 ， 
悬崖 、 溶 洞 遍布 ， 奇 峰 、 怪 石林 立 。 有 寺庙 、 古 树 ， 有 人 台地、 草坪， 有 丛林 、 花 卉 及 多 种 野生 动 植物 ; 
还 有 众多 古迹 和 神话 传说 ， 更 有 世界 最 高 的 砌 石 拱 坝 这 一 雄伟 的 景观 ， 真 可 谓 ' 群 英 荟萃 ' 。 景 区 内 各 类 
风景 自然 交织 ， 环 境 幽 静 ， 山 清水 秀 ， 确 是 一 处 难得 的 旅游 胜地 。 大 坝 风 光 群英 湖 坝 高 100.5 米 ， 是 
我 国 最 高 的 砌 石 坝 。 大 坝 息 立 于 高 山峡 谷 之 中 ， 气 势 雄 伟 挺 拔 ， 造 型 美观 ， 曾 先后 以 图 片 的 形式 在 国际 
大 坝 会 议和 广交会 上 介绍 展 出 。 我 国正 式 出 版 的 《中 国 大 坝 》、《 中 国 拱 坝 》 图 集 ， 以 及 有 关 坝 工 建设 
的 文献 资料 ， 都 将 群英 湖 大 坝 作为 典型 予以 刊登 。 群 英 湖 大 坝 确 实 为 我 国 坝 工 建设 上 的 一 枚 奇 范 。 三 
潭 映 月 三 潭 映 月 景观 集 线 瀑 、 帘 瀑 、 绿 潭 于 一 体 ， 呈 '7' 字 形 梯 状 分 布 ， 天 高 云 淡 ， 四 面 环 山 ， 从 林 茂 
密 ， 溪 流 不 断 ， 是 人 们 假日 休闲 的 好 去 处 …*…</p> 


</article> 


<article> 
<figure> 
<img src="images/ 焦 作 沁 阳 神农 坛 风景 图 4 .jpg" width="220" height="140" 
/> 
<figcaption> 
青龙 峡 
</figcaption> 
</figure> 
<p> 焦 作 青 龙 峡 位 于 河南 省 焦作 市 修 武 县 ， 是 河南 云 台山 世界 地 质 公园 主要 游览 区 之 一 ， 
也 是 目前 全 省 唯一 的 峡谷 型 省 级 风景 名 胜 区 ， 被 誉 为 “中 原 第 一 峡 ”。 焦作 青龙 峡 气 候 独特 、 山 清水 秀 、 
环境 优美 ， 是 一 处 天 然 “ 氧 吧 ”， 是 原始 生态 旅游 的 绝 佳 去 处 。 青 龙 峡 是 集 峰 、 岩 、 岭 、 癌 、 台 、 沟 、 
润 、 川 、 瀑 、 洞 等 地 貌 于 一 体 的 自然 山水 型 景区 。2000 年 被 确定 为 河南 省 风景 名 胜 区 ， 总 面积 108 平 方 
公里 ， 由 青龙 峡 、 净 影 峡 、 影 寺 盆 地 、 双 庙 、 猕 猴 谷 、 马 头 山 和 大 山 脑 七 大 游览 区 组 成 ， 主 要 景点 100 
多 处 。 主峰 青龙 峰 海拔 高 达 1323 米 ， 站 在 岭 内 ， 大 有 “举目 四 观 天 下 小 ”之 感慨 波澜 壮阔 的 望 龙 瀑 ” 
神奇 独特 的 倒流 泉 、 妙 不 可 言 的 七 彩 潭 、 堪 称 一 绝 的 “石上 春秋 ”、 独 具 特 色 的 溶洞 景观 、 再 加 上 天 然 
原始 的 植物 群落 、 构 成 了 一 幅 幅 极 富 创意 的 山水 画卷 ……</P> 
</article> 
<be 
be A 
xbE /> 
</section> 
</body> 
</html> 


ti@Q3j 编写 css.css 文件 
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设置 网 页 中 默认 文字 大 小 为 13px， 代 码 如 下 : 


*{font-size:13px;} 


设置 网 页 的 背景 颜色 为 浅 绿色 ， 代 码 如 下 : 


/* 页 面 背 景 颜 色 */ 
body{ background-color:"#ddfcca";} 


设置 section 区 块 的 属性 ， 代 码 如 下 : 


sectiont{ 
width:760px; 
margin:0px auto; /* 实 现 区 块 水 平 居 中 */ 
padding:0px 20px; 
border: lpx #50ad44 solid; 


为 景点 介绍 标题 设置 边 距 、 高 度 及 边框 颜色 ， 代 码 如 下 : 


h5{ 
margin: 10px 20px; /* 设 置 外 边 距 的 大 小 */ 
height :23px; /* 设 置 标题 的 高 度 */ 
border-bottom:3px #50ad44 soliqd; /* 设 置 下 边框 的 样式 */ 
text-indent :2em; /* 设 置 文本 缩 进 */ 


} 


为 景点 照片 和 说 明 的 父 对 象 figure 设置 相关 属性 ， 代 码 如 下 : 


figure{ 
padding-right:22px; /* 设 置 右 内 边 距 的 大 小 */ 
display:block; /* 使 段落 生出 行内 框 */ 
float:left; /* 设 置 元 素 向 左 浮动 */ 
width:220px; /* 设 置 元 素 的 高 度 */ 


} 


为 article 设置 相关 属性 ， 代 码 如 下 : 


article{ 
border-bottom:1px solid #50ad44; /* 设 置 底部 边框 样式 */ 
line-height:20px; /* 设 置 行 高 的 大 小 */ 
margin-bottom:10px; /* 设 置 元 素 的 下 外 边 距 */ 


’ 
为 景点 介绍 段落 p 设置 相关 属性 ， 代 码 如 下 : 


Pi 
margin:10px 13px; /* 设 置 外 边 距 的 大 小 */ 
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text-indent :2em; /* 设 置 文本 缩 进 */ 
} 


为 景点 图 片 说 明 figcaption 设置 相关 属性 ， 代 码 如 下 : 


figcaptiont{ 
text-align:center; /* 设 置 段落 居中 显示 */ 
color:#003300; /* 设 置 段落 的 颜色 */ 
text-decoration:underline; /+* 设 置 段落 下 画 线 效果 */ 
} 


为 景点 图 片 img 设置 相关 属性 ， 代 码 如 下 : 


img{margin-left:10px;} /* 设 置 外 边 距 的 大 小 */ 


7.5 综合 实例 2 一 一 网 页 简单 图 文 混 排 


在 一 个 新 闻 网 页 中 ， 出 现 最 多 的 就 是 文字 和 图 片 ， 图 文 并 茂 的 文章 能 够 生动 地 表达 新 闻 主 
题 。 本 实例 将 利用 前 面 介绍 的 文本 和 段落 属性 创建 一 个 图 片 的 简单 混 排 ,复杂 的 图 片 混 排 会 在 
后 面 介绍 ， 具 体 步 又 如 下 : 


[@ 分 析 需 求 


本 综合 实例 的 要 求 如 下 ,要求 在 网 页 的 最 上 方 显示 出 标题 ， 标 题 下 方 是 正文 ， 在 正文 部 分 
显示 图 片 。 上 述 要 求 使 用 CSS 样式 实现 ， 实 例 效 果 图 如 图 7-23 所 示 。 


Dm ode RENO 23html -0 mx DP- © 
BS ost code\nre. < 门 
效 分 本 -下 , fn 下 


女足 世界 杯 前 瞻 : 巴西 女足 哲 扒 澳洲 女足 


周 四 凌晨 ， 女 子 世界 杯 分 组 赛 [ 组 首 轮 的 赛事 全 面 展 开 ， 其 中 南美 劲旅 巴西 女足 将 在 德国 门 兴 
格拉 德 巴 娃 与 澳洲 女足 进行 较量 。 


巴西 足球 一 向 被 外 界 认可 ， 巴 西 女 足 上 届 女 子 世 界 杯 决赛 中 遗憾 地 0 比 2 不 敌 德 国 女足 ， 球 员 
消 腹 恕 气 ， 今 届 欲 卷土重来 - 


在 近 6 仗 国际 赛 中 ， 巴 西 女足 取得 4 胜 2 和 的 不 败 战 


图 7-23 ”图 文 混 排 显示 
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旧闻 分 析 布 局 并 构建 HTML 

首先 需要 创建 一 个 HTML 页 面 ， 并 用 DIV 将 页 面 划 分 为 两 层 ， 一 层 是 网 页 标题 ， 一 层 是 
正文 部 分 。 

io 导入 CSS 文 件 


将 CSS 文件 以 link 方式 导入 HTML 页 面 中 。 此 CSS 文件 定义 了 这 个 页 面 的 所 有 样式 ， 其 
导入 代码 如 下 所 示 : 

<link href="7-23.css" rel="stylesheet" type="text/css" /> 

L 国 完成 标题 部 分 

首先 设置 网 页 标题 部 分 ， 创 建 一 个 div， 用 来 放置 标题 。 其 HTML 代码 如 下 所 示 。 

<div> 

<h1> 女 足 世 界 杯 前 瞻 : 巴西 女足 拆 擒 澳洲 女足 </h1> 


</div> 


在 CSS 样式 文件 中 ， 修 饰 HTML 元 素 ， 其 CSS 代码 如 下 所 示 。 


hl{text-align:center; /* 设 置 段 落 居中 显示 */ 
text-shadow:0.lem 2px 6px blue; /* 设 置 文字 阴影 效果 */ 
font-size:18px; /* 设 置 文本 大 小 */ 


i 
[加 完成 正文 和 图 片 部 分 


下 面 设置 网 页 正文 部 分 ， 正 文中 包含 了 一 个 图 片 。 其 HTML 代码 如 下 所 示 。 


<div> 

<p> 周 四 凌晨 ， 女 子 世 界 杯 分 组 赛 D 组 首 轮 的 赛事 全 面 展 开 ， 其 中 南美 劲旅 巴西 女足 将 在 德国 门 兴 格 
拉 德 巴赫 与 澳洲 女足 进行 较量 。 

</p><p> 巴西 足球 一 向 被 外 界 认可 ， 巴 西 女 足 上 届 女 子 世界 杯 决赛 中 遗憾 地 0 比 2 不 敌 德国 女足 ， 
球员 满腹 怨气 ， 今 届 欲 卷土重来 。</p> 

<div class="im"> 

<img src="8.jpg"> 

</div> 

<p> 在 近 6 场 国际 赛 中 ， 巴 西 女足 取得 4 胜 2 和 的 不 败 战绩 ， 在 备战 今 届 赛事 中 的 两 场 热 身 赛 中 ， 相 
继 3 比 0 完胜 智利 女足 和 4 比 1 大 胜 阿 根 廷 女足 ， 显 得 游 思 有 余 。 此 番 中 立场 面 对 实 力 较 弱 的 澳洲 女足 ， 巴 
西 女足 有 望 取得 开门 红 。 澳 洲 女 足 上 届 女 子 世界 杯 在 半 准 决赛 中 不 敌 巴 西 女足 ， 止 步 八 强 ， 虽 然 在 上 场 
国际 赛 中 主场 2 比 1 力克 纽 西 兰 女 足 ， 但 在 之 前 2 场 国际 赛 分 别 以 1 比 2 相 同 的 比分 不 敌 德国 女足 和 南韩 女 
足 ， 近 3 场 失 球 多 达 5 个 ， 澳 洲 女 足 的 后 防线 漏洞 丽 怕 难以 抵挡 巴西 女足 的 强大 攻势 ， 加 上 往 绩 上 澳洲 女 
足 3 战 皆 负 ， 本 场 对 阵 实力 强大 的 巴西 女足 ， 澳 洲 女足 只 能 寄 望 输 少 当 赢 。 

</p> 

</div> 
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CSS 样式 代码 如 下 所 示 。 


p{text-indent:8mm; ”/* 设 置 文 本 缩 进 */ 
line-height:7mm;  /* 设 置 行 高 的 大 小 */ 
} 


.im{width:300px; /* 设 置 图 片 的 宽度 */ 
float:left; /* 设 置 图 片 向 左 浮动 */ 


border:#000000 solid lpx; /* 设 置 图 片 的 边框 样式 */ 
} 


7.6 专家 解 惑 


1. 字体 为 什么 在 别 的 电脑 上 不 显示 ? 

楷体 很 漂亮 ， 草 书 也 不 逊色 于 宋体 ,但 并 不 是 所 有 人 的 电脑 都 安装 有 这 些 字体 。 所 以 在 设 
计 网 页 时 ， 不 要 为 了 追求 漂亮 美观 而 采用 一 些 比较 新 奇 的 字体 。 有 时 这 样 往往 达 不 到 效果 。 用 
最 基本 的 字体 是 最 好 的 选择 。 

2. 处 理 网 页 中 的 空白 吗 ? 

争取 不 留 空白 , 即使 有 足够 的 空间 , 也 不 要 用 图 像 、 文 本 或 不 必要 的 动画 GIF 来 填充 网 页 ， 
在 设计 时 应 该 避免 这 种 情况 发 生 。 

3. 文字 和 图 片 导航 速度 谁 快 ? 

使 用 文字 做 导航 栏 。 文 字 有 导航 不 但 速度 快 ， 而 且 更 稳定 。 例 如 ， 有 些 用 户 上 网 时 会 关闭 图 
片 。 在 处 理 文本 时 ， 不 要 在 普通 文本 上 添加 下 画 线 或 者 颜色 。 除 非特 别 需要 ， 否 则 不 要 为 普通 
文字 添加 下 面 线 ， 避 免 使 读者 误 认为 文字 能 够 点 击 。 


第 8 章 CSS3 美 化 表格 和 表单 样式 


HTML 数据 表格 和 表单 都 是 网 页 中 常见 的 元 素 ， 表 格 通常 用 来 显示 二 维 关系 数据 和 排版 ， 
从 而 达到 页 面 整齐 和 美观 的 效果 。 表 单 是 作为 客户 端 和 服务 器 交流 的 窗口 ， 可 以 获取 客户 端 信 
息 ， 并 反馈 服务 器 端 信息 。 本 章 将 介绍 使 用 CSS3 样式 表 美 化 表格 和 表单 样式 的 方法 。 


8.1 表格 基本 样式 


在 传统 网 页 设计 中 ， 表 格 一 直 占有 比较 重要 的 地 位 ， 用 来 对 网 页 排版 布局 。 基 本 上 每 个 网 
页 中 都 有 一 个 表格 来 布局 ， 它 可 以 帮助 设计 者 控制 网 页 布局 、 控 制 内 容 的 显示 等 。 使 用 表格 排 
版 网 页 可 以 使 网 页 更 美观 、 条 理 更 清晰 ， 更 易于 维护 和 更 新 。 本 节 将 主要 介绍 如 何 使 用 CSS3 
设置 表格 边框 和 表格 背景 色 。 
8.1.1 表格 边框 样式 

在 显示 一 个 表格 数据 时 ， 通 常 都 带 有 表格 边框 ， 用 来 界定 不 同 单元 格 的 数据 。 当 table 表 
格 的 描述 属性 border 值 大 于 0 时 显示 边框 ,如果 border 值 为 0, 就 不 显示 边框 。 边框 显示 之 后 ， 
可 以 使 用 CSS3 的 border 属性 及 衍生 属性 和 border-collapse 属性 对 边框 进行 修饰 ， 其 中 border 
属性 表示 对 边框 进行 样式 、 颜 色 和 宽度 设置 ， 从 而 达到 提高 样式 效果 的 目的 ， 这 个 属性 前 面 已 
经 介绍 过 了 ， 其 使 用 方法 和 前 面 一 模 一 样 ， 只 不 过 修饰 的 对 象 变 换 了 。 

border-collapse 属性 主要 用 来 设置 表格 的 边框 是 否 被 合并 为 一 个 单一 的 边框 ， 还 是 像 在 标 
准 的 HTML 中 那样 分 开 显示 。 其 语法 格式 为 : 


border-collapse:separate|collapse 


其 中 separate 是 默认 值 ， 表 示 边 框 会 被 分 开 ， 不 会 忽略 border-spacing 和 empty-cells 属性 ; 而 
collapse 属性 表示 边框 会 合并 为 一 个 单一 的 边框 ， 会 忽略 border-spacing 和 empty-cells 属性 。 


【 例 8.1】〔 实 例文 件 : ch08\8.1.html) 


<!DOCTYPE html> 
<html> 
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<head> 

<title> 年 度 收 入 </title> 

<style> 

<!1== 

.tabelist{ 
border:1lpx soliq #429fff;  /* 表格 边框 */ 
font-family: "楷体 "; 
border-collapse:collapse; /* 边框 重大 */ 

i 

.tabelist captiont{ 
padding-top:3px; /* 设 置 上 内 边 距 的 大 小 */ 
padding-bottom:2px; /* 设 置 下 内 边 距 的 大 小 */ 
font-weight :bolder; /* 设 置 字体 的 粗细 */ 
font-size:15px; /* 设 置 字体 的 大 小 */ 


font-family:" 幼 圆 "; 
border:2px solid #429fff; 

} 

.tabelist tht{ 
font-weight:bold; 
text-align:center; 

} 

.tabelist tdt{ 


/* 设置 文本 的 字体 */ 


/* 表格 标题 边框 */ 


/* 设 置 字体 的 粗细 */ 
/* 设 置 段 落 居中 显示 */ 


border:1px soliqd #429fff; /* 单元 格 边框 */ 
text-align:right; /* 设 置 段 落 靠 右 显 示 */ 
padding:4px; /* 设 置 内 边 距 的 宽度 */ 
让 
--> 
</style> 
</head> 
<body> 


<table class="tabelist"> 

<caption class="tabelist"> 

2018 季 度 07-09 

</caption> 

飞信 交 闫 

<th> 选 项 </th> 

<th>07 月 </th> 
<th>08 月 </th> 
<th>09 月 </th> 

Ee 

E> 
<td> 收 入 </td> 
<td>8000</td> 
<td>9000</td> 
<td>7500</td> 

</Er> 

sp 
<td> 吃 饭 </td> 
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<td>600</td> 
<td>570</td> 
<td>650</td> 
< /ErS 
ER 
<tq> 购 物 </td> 
<td>1000</td> 
<td>800</td> 
<td>900</td> 
Er 
< 
<tq> 买 衣服 </td> 
<td>300</td> 
<td>500</td> 
<td>200</td> 
/tr> 
SET 
<td> 看 电影 </td> 
<td>85</td> 
<td>100</td> 
<td>120</td> 
</Er> 
<tr> 
<td> 买 书 </td> 
<td>120</td> 
<td>67</td> 
<td>90</td> 
HEF 
</table> 
</body> 
</html> 


在 正 11.0 中 的 浏览 效果 如 图 8-1 所 示 。 其 中 ,表格 带 有 边框 显示 ， 其 边框 宽度 为 I px， 直线 显 
示 并 且 边 框 进行 合并 ;表格 标题 “2018 季度 07-09” 也 带 有 边框 显示 ， 字 体 大 小 为 150px， 字 形 是 
幼 圆 并 加 粗 显 示 ; 表格 中 每 个 单元 格 都 以 lpx、 直 线 的 方式 显示 边框 并 将 显示 对 象 右 对 齐 。 


- oO x 
DEADwodcE 国 ” | 要 
EE > 
ES Lm 
造 项 07 月 08 月 09 月 
收入 |8000|9000|7500 
吃饭 | 600| 570| 650 
购物 | 1000| 800| 900 
买 衣服 | 300| 500| 200 
看 电影 | 85| 100| 120 
买书 | 120| 67| 90 


图 8-1 表格 样式 修饰 
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对 于 上 面 的 例子 , 我 们 会 发 现 没有 使 用 HMTIL 标记 中 的 border 设置 边框 ， 而 是 使 用 CSS3 
的 属性 border 来 设置 table 边框 ， 这 样 做 可 以 在 不 同 浏览 器 上 显示 相同 样式 。 


8.1.2 ”表格 边框 宽度 


虽然 使 用 HTML 标记 的 描述 border 也 能 提高 表格 的 宽度 ， 但 我 们 还 是 推荐 使 用 CSS 属性 
设置 边框 宽度 ,如 使 用 border-width 对 边框 宽度 进行 设置 。 如 果 需 要 单独 设置 某 一 个 边框 宽度 ， 
可 以 使 用 border-width 的 衍生 属性 设置 ， 例 如 border-top-width 和 border-left-width 等 。 


【 例 8.2】“〈 实 例文 件 ， ch08\8.2.html) 
<!DOCTYPE html> 


<html> 

<head> 

<title> 表 格 边框 宽度 </title> 

<style> 

table{text-align:center; /* 设 置 居 中 显示 */ 
width:500px; /* 设 置 表格 的 宽度 */ 


border-width: 6px; /* 设 置 边框 的 宽度 */ 
border-style:double; /* 设 置 边 框 的 样式 为 双 线 */ 
color:blue; /* 设 置 文 本 的 颜色 */ 
} 
td{border-width:3px; /* 设 置 边框 的 宽度 */ 
border-style:dashed; /* 设 置 边 框 的 样式 为 虚线 */ 
} 
</style> 
</head> 
<body> 
<table border=1 cellspacing="3" cellpadding="0"> 
<tr> 
<td> 姓 名 </td> 
<td class=tds> 性 别 </td> 
<td> 年 龄 </td> 
/Er 
<tr> 
<td> 张 三 </td> 
<td> 男 </td> 
<td>31</td> 
</tr> 
<tr> 
<td> 李 四 </td> 
<td> 男 </td> 
<td>18</td> 
</tr> 
</table> 
</body> 
</html> 
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在 正 11.0 中 的 浏览 效果 如 图 8-2 所 示 。 其 中 ， 表 格 带 有 边框 ， 宽 度 为 6px， 双 线 式 ， 表 格 
中 字体 颜色 为 蓝 色 ， 单 元 格 边框 宽度 为 3px， 显 示 样 式 是 破 折线 式 。 


导 DERode 吕 国 -| 本 PD- ® 


| & sRiD 民 天 x 正 
请 名 二 妆 -下 . ty 


图 8-2 设置 表格 宽度 


8.1.3 ”表格 边框 颜色 


表格 颜色 设置 非常 简单 ， 通 常 使 用 CSS3 属性 color 设置 表格 中 的 文本 颜色 ， 使 用 
background-color 设置 表格 背景 色 。 如 果 为 了 突出 表格 中 的 某 一 个 单元 格 ， 还 可 以 使 用 
background-color 设置 某 一 个 单元 格 颜 色 。 


【 例 8.3】 实例 文件 ，ch08\8.3.html) 


<!DOCTYPE html> 


<html> 
<head> 
<title> 表 格 边 框 色 和 背景 色 </title> 
<style> 
5 
padding:0px; /* 设 置 内 边 距 的 大 小 */ 
margin:0Px7 /* 设 置 外 边 距 的 大 小 */ 
} 
body{ 
font-family:" 宋 体 "; /* 设 置 文本 字体 样式 */ 
font-size:12px; /* 设 置 字体 大 小 */ 
} 
tablef{ 
background-color:yellow; /* 设 置 背 景 颜色 为 黄色 */ 
text-align:center; /* 设 置 居中 显示 */ 
width:500px; /* 设 置 表格 宽度 */ 
border:1lpx solid green; /* 设 置 表格 边框 的 粗细 和 颜色 */ 
taf 
border:1px solid green; /* 设 置 单元 格 边 框 的 粗细 和 颜色 */ 
height:30px; /* 设 置 单元 格 的 高 度 */ 
line-height:30px; /* 设 置 单元 格 行 高 的 大 小 */ 
UL 
tdsy 
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background-color:#FFEl1FF; /* 设 置 单 元 格 的 背景 颜色 */ 
} 
</style> 
</head> 
<body> 
<table cellspacing="3" cellpadding="0"> 
<tr> 
<tq> 姓 名 </td> 
<td class=tds> 性 别 </td> 
<td> 年 龄 </td> 
EYE 
<tr> 
<td> 刘 天 翼 </td> 
<td> 男 </td> 
<td>32</td> 
</tr> 
北三 
<td> 刘 天 佑 </td> 
<td> 女 </td> 
<td>28</td> 
</tr> 
</table> 
</body> 
</html> 


在 IE 11.0 中 的 浏览 效果 如 图 8-3 所 示 。 表 格 带 有 边框 ,边框 样式 显示 为 绿色 ,表格 背景 色 
为 黄色 ， 其 中 一 个 单元 格 背 景色 为 浅 紫色 。 


于 DEFH 旦 fkcodc 呈 [本 ”C 性 本 Pp- © 
|B mote 
六 向 百 下 ,fo 


性 别 


图 8-3 设置 边框 背景 色 


8.2 CSS3 与 表单 


表单 可 以 用 来 向 Web 服务 器 发 送 数据 ， 特 别 是 经 常 被 用 在 主页 页 面 一 一 用 户 输入 信息 然 
后 发 送 到 服务 器 中 。 实 际 用 在 HTML 中 的 标记 有 <form>、<input>、<textarea>、<select> 和 
<option>。 本 节 将 使 用 CSS3 相关 属性 对 表单 进行 美化 。 
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8.2.1 美化 表单 元 素 


表单 中 的 元 素 非常 多 而 且 杂 乱 ， 例 如 input 输入 框 、 按 钮 、 下 拉 菜 单 、 单 选 按钮 和 复 选 框 
等 。 当 使 用 form 表单 将 这 些 元 素 排列 组 合 在 一 起 的 时 候 ， 其 单纯 的 表单 效果 非常 简陋 ， 这 时 
设计 者 可 以 通过 CSS3 相关 样式 控制 表单 元 素 输入 框 、 文 本 框 等 元 素 外 观 。 

在 网 页 中 ， 表 单元 素 的 背景 色 默 认 都 是 白色 的 ， 这 样 的 背景 色 不 能 美化 网 页 ， 所 以 可 以 使 
用 颜色 属性 定义 表单 元 素 的 背景 色 。 定义 表单 元 素 背景 色 可 以 使 用 background-color 属性 定义 ， 
这 样 可 以 使 表单 元 素 不 那么 单调 。 使 用 示例 如 下 所 示 。 


input{ 
background-color:#ADD8E6; 
} 


上 面 代码 设置 了 input 表单 元 素 背 景色 ， 都 是 统一 的 颜色 。 


【 例 8.4】 《实例 文件 : ch08\8.4.tml) 


<!DOCTYPE html> 
<html> 
<head> 
<style> 
input{ /* 所 有 input 标 记 */ 
color:#cad9ea; 
} 
input .txt{ /* 文本 框 单独 设置 */ 
border:1px inset #cad9ea; 
background-color:#ADD8E6; 
} 
input .btn{ /* 按钮 单独 设置 */ 
color:#00008B; 
background-color:#ADD8E6; 
border:lpx outset #cad9ea; 
padding:1lpx 2px lpx 2px; 
} 
select{ 
width:80px; 
color:#00008B; 
background-color:#ADD8E6; 
border:1lpx solid #cad9ea; 
} 
textareat{ 
width:200px; 
height:40px; 
color:#00008B; 
background-color:#ADD8E6; 
border:1lpx inset #cad9ea; 
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. 

</style> 

</head> 

<body> 

<h3> 聊 天 室 注册 页 面 </h3> 

<table borqder="1" width="45%"> 

<form method="post"> 

<tr><td width="30%"> 上 昵称 :</td><td><input class=txt>1 一 20 个 字符 <div 
id="qq"></div></td></tr> 

<tr><td> 密 码 :</td><td><input type="password" > 长 度 为 6 一 16 位 </td></tr> 

<tr><td> 确 认 密码 :</td><td><input type="password" ></td></tr> 

<tr><tqd> 真 实 姓 名 : </td><td><input name="usernamel"></td></tr> 

<tr><td> 性 别 :</td><td><select><option> 男 </option><option> 女 
</option></select></td></tr> 

<tr><td>E-mail 地 址 :</td><td><input value="sohu@sohu.com"></td></tr> 

<tr><td> 备 注 :</td><td><textarea cols=35 rows=10></textarea></td></tr> 

<tr><td><input type="button" value=" 提 交 " class=btn /></td><td><input 
type="reset" value=" 重 填 "/></td></tr> 

</form> 

</table> 

</body> 

</html> 


在 下 11.0 中 的 浏览 效果 如 图 8-4 所 示 , 表单 中 【昵称 】 输 入 框 、【 性 别 】 下 拉 列 表 框 和 【 备 
注 】 文 本 框 中 都 显示 了 指定 的 背景 颜色 。 


加 DA 本 书 师 ( 司 \code\ 于 | 鲜 ~ 必 | 但 二 Pp- © 
© Ds 二 书 兰 KEKodevf x 上 
请 名 下 区 一 下 ,fy3K50 莫 


聊天 室 注册 页 面 


1 一 20 个 
字符 
全权， 长 度 为 6 

二 6 全 

坝 江 细 | 
取 : 
英吉 隐 | 
名 ; 
| 


E-mail 
| 地址 : 


图 8-4 美化 表单 元 素 
在 上 面 的 代码 中 , 首先 使 用 input 标记 选择 符 定义 了 input 表单 元 素 的 字体 输入 颜色 ， 下面 


精通 HTML54CS53+JavaScript 网 页 设计 〈 视 频 教学 版 ) 〈 第 2 版 ) 


分 别 定义 了 两 个 类 txt 和 btm，txt 用 来 修饰 输入 框 样式 ，bt 用 来 修饰 按钮 样式 。 最 好 分 别 定义 
select 和 textarea 的 样式 ， 其 样式 定义 主要 涉及 边框 和 背景 色 。 


8.2.2 ”美化 提交 按钮 

在 网 页 设计 中 ， 还 可 以 使 用 CSS 属性 来 定义 表单 元 素 的 边框 样式 ， 从 而 改变 表单 元 素 的 
显示 效果 。 例 如 ， 可 以 将 一 个 输入 框 的 上 、 左 和 右边 框 去 掉 ， 形 成 一 个 和 签名 效果 一 样 的 输入 
框 ， 将 按钮 的 四 个 边框 去 掉 ， 只 剩 下 文字 超级 链接 一 样 的 按钮 。 

对 表单 元 素 边框 定义 ， 可 以 采用 border-style、border-width 和 border-color 及 其 衍生 属性 。 
如 果 要 对 表单 元 素 背景 色 设 置 ， 可 以 使 用 background-color 设置 ， 其 中 将 值 设置 为 transparent 
(透明 色 ) 是 最 常见 的 一 种 方式 ， 示 例如 下 所 示 。 


background-color:transparent;  /* 背景 色 透 明 */ 


【 例 8.5】 (实例 文件 :ch08\8.5.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 表 单元 素 边框 设置 </title> 
<style> 
form{ 
margin:0px; 
padding:0px; 
font-size:14px; 
} 
input{ 
font-size:14px; 
font-family:" 幼 圆 "; 
} 
se 
border-bottom:1px solid #005aa7; ”/* 下 画 线 效 果 */ 
color:#005aa7; 
border-top:0px; border-left:0px; 
border-right:0px; 
background-color:transparent; /* 背景 色 透 明 */ 


-mit 
background-color:transparent; /* 背景 色 透 明 */ 
border:0px; /* 边框 取消 */ 

于 

</style> 

</head> 

<body> 

<center> 
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<h1> 签 名 页 </h1> 

<form method="post"> 

值班 主任 : <input id="name" class="t"> 

<input type="submit" value=" 提 交 上 一 级 签名 >>" class="n"> 
</form> 

</center> 

</body> 

</html> 


在 正 11.0 中 的 浏览 效果 如 图 8-5 所 示 , 输入 框 只 剩 下 一 个 下 边框 显示 , 其 他 边框 被 去 掉 了 ， 
提交 按钮 也 只 剩 下 了 显示 文字 ， 常 见 的 矩形 形式 被 去 掉 了 。 


过 局 x 
@ 名 “DA 本 书 源 代 码 code\ 国 ”| 搜索- 
| 号 示人 元 素 边框 设 首 x 辑 
郊 基 百 度 一 下 ， 人 SBX 逢 
忆 
签名 页 
值班 主任 : 刘 天 全 x ”提交 上 一 级 签名 >> 


图 8-5 表单 元 素 边框 设置 
在 上 面 的 代码 中 ,样式 表 中 定义 了 两 个 类 标识 符 t 和 n, t 用 来 设置 输入 框 显示 样式 ， 此 处 
设置 输入 框 的 左 、 上 、 下 三 个 方面 边框 宽度 为 0， 并 设置 了 输入 框 输入 字体 颜色 为 浅 蓝 色 ， 下 
边框 宽度 为 1px、 直 线 样式 显示 、 颜 色 为 浅 蓝 色 。 在 类 标识 符 n 中 ,设置 背 景色 为 透明 色 和 边 
框 宽度 为 0， 这 样 就 去 掉 了 按钮 常见 的 矩形 样式 。 


8.2.3 ”美化 下 拉 菜 单 


在 网 页 设计 中 ， 有 时 为 了 突出 效果 会 对 文字 进行 加 粗 、 更 换 颜 色 等 操作 ， 这 样 用 户 就 会 注 
意 到 这 些 重要 文字 。 同 样 ， 也 可 以 对 表单 元 素 中 的 文字 进行 这 样 的 修饰 ， 下 拉 菜 单 是 表单 元 素 
中 常用 的 元 素 之 一 ， 其 样式 设置 也 非常 重要 。 

CSS3 属性 不 仅 可 以 控制 下 拉 菜 单 的 整体 字体 和 边框 ， 还 可 以 对 下 拉 菜 单 中 的 每 一 个 选项 
设置 背景 色 和 字体 颜色 。 对 于 字体 设置 可 以 使 用 font 相关 属性 , 例如 font-size、font-weight 等 ; 
对 于 颜色 设置 ， 可 以 采用 color 和 background-color 属性 设置 。 


【 例 8.6】〔 实 例文 件 : ch08\8.6.html) 
<!DOCTYPE html> 

<html> 

<head> 
<title> 美 化 下 来 菜单 </title> 
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<style> 
.bluel{ 
background-color:#7598FB; 
color: #000000; 
font-size:15px; 
font-weight:bolder; 
font-family:" 幼 圆 "; 
} 
.red{ 
background-color:#E20A0A; 
Color: #ffffff; 
font-size:15px; 
font-weight:bolder; 
font-family:" 幼 圆 "; 
} 
.yellowt{ 
background-color:#FFFF6F; 
color: #000000; 
font-size:15px; 
font-weight:bolder; 
font-family:" 幼 圆 "; 
} 
.orangel{ 
background-color:orange; 
color:#000000; 
font-size:15px; 
font-weight:bolder; 
font-family:" 幼 圆 "; 
1 
</style> 
</head> 
<body> 
<form method="post"> 
<p><label for="color"> 选 择 暴雨 预警 信号 级 别 :</1label> 
<select name="color" id="color"> 
<option value=""> 请 选择 </option> 
<option value="blue" class="blue"> 暴 雨 蓝 色 预 警 信号 </option> 
<option value="yellow" class="yellow"> 暴 雨 黄色 预警 信号 </option> 
<option value="orange" class="orange"> 暴 雨 橙色 预警 信号 </option> 
<option value="red" class="red"> 暴 雨 红 色 预 警 信号 </option> 
</select></p> 
<p><input type="submit" value=" 提 交 "></p> 
</form> 
</body> 
</html> 


在 下 11.0 中 的 浏览 效果 如 图 8-6 所 示 , 下 拉 菜 单 中 每 个 菜单 项 显示 不 同 的 背景 色 。 采用 这 
种 方式 显示 选项 会 提高 人 的 注意 力 ， 减 少 犯错 的 机 会 。 
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在 上 面 的 代码 中 ,设置 了 四 个 类 标识 符 ， 用 来 对 应 不 同 的 菜单 选项 。 其 中 每 个 类 中 都 设置 
了 选项 的 背景 色 、 字 体 颜 色 、 大 小 和 字形 。 


闫 D:\ 丰 书 源 代 友 code 图 ”| 搜索 
司 美化 来 茉 单 x 加 
请 名 百度 -下 , 你 x 


选择 暴雨 预 葡 信号 级 别 : 隔 吾 


EE 


图 8-6 设置 下 拉 菜 单 样 式 


8.3 综合 实例 1 一 一 隔行 变色 


当 使 用 表格 显示 大 量 数据 的 时 候 ， 表 格 的 行 和 列 比 较 多 ， 此 时 如 果 采 用 相同 的 单元 格 背景 
色 ， 用 户 在 查看 数据 时 会 感到 非常 凌乱 ， 很 容易 在 读数 据 时 出 错 。 通 常 的 解决 办 法 就 是 采用 隔 
行 变色 ， 使 得 奇数 行 和 偶数 行 的 背景 色 不 一 样 ， 从 而 达到 数据 一 目 了 然 的 效果 。 本 节 将 结合 前 
面 学 习 的 知识 ， 创 建 一 个 隔行 变色 实例 ， 具 体操 作 步 又 如 下 : 


[0 出 分 析 需 求 


如 果 要 实现 表格 隔行 变色 ,首先 需要 实现 一 个 表格 并 定义 其 显示 样式 , 然后 设置 其 奇数 行 
和 偶然 行 显示 的 颜色 即 可 。 


到 创建 HTML 页 面 ， 实 现 基本 table 表格 


<!DOCTYPE html> 
<html> 

<head> 
<title> 隔 行 变色 </title> 
</head> 

<body> 

<h1> 设 计 优雅 数据 表格 </h1> 
<table border=1> 

<tr> 

<th> 排 名 </th> 
<th> 姓 名 </th> 
<th> 总 分 </th> 
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<th> 语 文 </th> 

<th> 数 学 </th> 

</tr> 

<tr><td>1</td><td> 孔 宇 </td><td>180</td><td>91</td><td>89</td></tr> 
<tr><td>2</td><td> 曹 圆 新 </td><td>176</td><td>76</td><td>100</td></tr> 
<tr><td>3</td><td> 史 雅 琪 </td><td>168</td><td>83</td><td>85</td></tr> 
<tr><td>4</td><td> 曹 秀 英 </td><td>153</td><td>73</td><td>80</td></tr> 
<tr><td>5</td><td> 杨 青 </td><td>146</td><td>70</td><td>76</td></tr> 
</table> 

</body> 

</html> 


在 正 11.0 中 的 浏览 效果 如 图 8-7 所 示 ， 页 面 中 显示 了 一 个 表格 ， 其 表格 字体 、 边 框 等 都 
是 默认 设置 。 


人 @ 旨 添加 CSS 代码 ， 设 置 标题 和 表格 基本 样式 


<style> 
hi{font-size:16px;} /* 设 置 标题 字体 大 小 */ 
tablef{ 
width:100%; 
font-size:12px; /* 设 置 表格 字体 大 小 */ 
table-layout:fixed; /* 设 置 表格 布局 样式 */ 
empty-cells:show; /* 绘 制 单元 格 的 边框 */ 
border-collapse:collapse; /* 边 框 合并 */ 
margin:0 auto; /* 设 置 外 边框 的 样式 */ 
border:1px solid #cad9ea; /* 设 置 边框 的 边框 粗细 和 颜色 */ 
color:#666; /* 设 置 字体 颜色 */ 
</style> 


在 此 样式 设置 中 ， 设 置 了 标题 字体 大 小 为 16px、 表 格 字体 大 小 为 12px， 边 框 合并 ， 边 框 
大 小 为 1 像素 和 直线 显示 等 。 其 中 ，empty-cells 属性 设置 是 否 显示 表格 中 的 空 单元 格 〈 仅 用 于 
“分 离 边框 ”模式 ) ，show 表示 显示 ，hidden 表示 隐藏 。table-layout:fixed 语句 表示 表格 的 水 
平 布局 是 仅仅 基于 表格 的 宽度 、 表 格 边框 的 宽度 、 单 元 格 间距 、 列 的 宽度 ， 而 和 表格 内 容 无 关 。 

在 正 11.0 中 的 浏览 效果 如 图 8-8 所 示 。 页 面 中 显示 了 一 个 表格 ， 其 大 小 充满 了 整个 页 面 ， 
边框 大 小 显示 为 浅 蓝 色 。 
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04 添加 CSS 代码， 修饰 世 和 也 单元 格 


th{ 
height:30px; 
overflow:hidden; 


1 

td{height:20px;} 

td, th{ 
border:lpx solid #cad9ea; 
padding:0 lem 0; 

} 


| 人 - OO x 
9 mo ~ OE- 站 Di 本 书 漂 fS\code 六 图 ”| 要案 | 
郊外 |§ me x 加 

设计 优雅 数据 表格 mr 

T 本 
设计 优雅 数据 表格 
排名 姓名 总 分 语文 “| 教学 

1 1 宇 180 Bp1 |s9 

忆 _“] 车 下痢 n76 [re jloo 2 176 re [100 

Bj 里 雅 现 [168 ]l83_]l85 3 168 3 [85 

Ej] 晶 夯 更 [153 jf73_jf8o 4 153 73 |s0 

6 _] 杨 青 ]hnasjro je 5 146 四 四 

图 8-7 设置 table 表格 图 8-8 设置 表格 和 标题 样式 


在 正 11.0 中 的 浏览 效果 如 图 8-9 所 示 。 表 格 中 单元 格 高 度 加 大 ，td 增加 到 20px， 也 增加 
到 30px。 单 元 格 还 带 有 边框 显示 ， 大 小 为 1px， 直 线 样式 ， 颜 色 为 浅 蓝 色 。 


08 添加 CSS 代码 ， 实 现 隔行 变色 
tr:nth-child (even){ 


background-color:#FFD39B; 
} 


在 这 里 使 用 结构 伪 类 标识 符 ， 实 现 了 表格 的 隔行 变色 。 


在 正 11.0 中 的 浏览 效果 如 图 8-10 所 示 ， 表 格 中 奇数 行 显示 为 浅 蓝 色 。 


入 ! 罚 x = 口 x 
| 站 DA 书 源 代 码 codeW 图 ”已 搜索 交 ”DA 本 书 涯 代码 code 图 ”中 | 搜索 . nD 

局 隔行 变色 上 | 原 后 5 交 色 Bn 

弃 汪 百 度 一 下 ,你 gn 首 请 名- 下 ,多 stn 
设计 优雅 数据 表格 设计 优雅 数据 表格 
| 排名 姓名 ”| ”总 分 博文 数学 

1 主 liso 加 89 

加 |176 78 [100 

3 |168 83 |85 

4 [iss 73 |so 

6 ss ro Irs 

8-9 设置 单元 格 样式 图 8-10 隔行 显示 
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8.4 综合 实例 2 一 一 表格 图 文 网 页 布局 


文字 和 图 片 等 对 象 的 定位 是 网 页 设计 中 的 难点 ， 用 表格 布局 网 页 结构 是 一 种 非常 重要 、 最 
为 常用 的 方法 ， 同 时 也 是 网 页 设计 的 重点 。 通 过 单元 格 可 以 对 文本 或 图 片 进 行 定位 ， 以 达到 布 
局 整齐 的 效果 。 本 实例 将 结合 前 面 学 习 的 知识 ， 实 现 通 过 表格 对 图 片 和 文字 进行 布局 ， 具 体操 
作 步 又 如 下 : 


L 国 分析 需求 


使 用 表格 进行 排版 ， 需 要 先 确定 是 图 文 坚 排 还 是 横 排 ， 这 样 即 可 确定 图 片 的 放置 位 置 (如 
果 采 用 竖 排 ， 可 以 在 表格 的 第 一 行 放置 图 片 ， 对 应 的 下 面 放置 文字 介绍 ) ， 然 后 使 用 CSS 样式 
对 图 片 、 文 字 和 表格 进行 设 定 。 


[加 创建 HTML 页 面 ， 实 现 表 格 基本 样式 


<!DOCTYPE html> 
<html> 
<head> 
<title> 无 标题 文档 </title> 
</head> 
<body> 
<table align=center border="1l" cellspacing="4" cellpadding="0"> 
<tr> 
<td><img src="8.jpg"/><p> 时 尚 大 玩具 ! 车 展 前 实 拍 路 虎 极光 coupe 
</p> 
</td> 
<td><img src="6.jpg"/><p> 充 满 活 力 的 小 家 伙 上 海 车 展 体验 奥迪 Q3 
</p></td> 
</tr> 
ER 
<td> 路 虎 总 是 以 硬汉 的 形象 出 现在 人 们 面前 </td> 
<td> 奥 迪 将 推出 入 门 级 SUV 车 型 奥迪 Q3 时 ， 大 家 都 自然 而 然 地 觉得 这 款 车 型 是 和 宝马 X1 竞 争 的 
产品 </td> 
</tr> 
<Er> 
<td> 全 景 天 窗 已 经 成 为 中 高 端 SUV 的 流行 趋势 </td> 
<td> 奥 迪 03 相 比 两 位 兄长 有 简化 也 有 复杂 化 </td> 
</tr> 
</table> 
</body> 
</html> 


上 面 的 网 页 代码 创建 了 一 个 表格 ， 表 格 第 一 行 分 别 放置 两 种 图 片 ， 下 面 两 行 放置 文字 。 
在 正 11.0 中 的 浏览 效果 如 图 8-11 所 示 , 页 面 中 显示 了 一 个 表格 , 表格 中 包含 了 两 张 图 片 。 
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上 @3 添加 CSS 代码 ， 修 饰 全 局 样式 和 表格 


<style> 
pt 
padding:0px; /* 设 置 内 边 距 的 大 小 */ 
margin:0px; /* 设 置 外 边 距 的 大 小 */ 
} 
table{ 
font-family:" 幼 圆 "; /* 设 置 文 本 的 字体 样式 */ 
text-align:center; /* 设 置 居中 显示 */ 
margin:10px 0 0 30px; /* 设 置 表格 的 外 边 距 */ 


background-color:#Cccddcc; /* 设 置 表格 的 背景 颜色 */ 
border-color:#0099ff; /* 设 置 表格 的 边框 颜色 */ 


width:400px; /* 设 置 表格 的 宽度 */ 
font-size:15px; /* 设 置 文字 的 大 小 */ 
} 

</style> 


通过 上 面 的 代码 即 可 创建 一 个 table 标记 选择 器 ， 该 选择 器 设置 了 字体 样式 和 背景 样式 。 
在 下 11.0 中 的 浏览 效果 如 图 8-12 所 示 。 页 面 中 显示 了 一 个 表格 ， 其 背景 色 为 绿色 ， 字 体 
居中 对 齐 ， 背 景色 为 浅 绿色 ， 边 框 色 为 浅 蓝 色 。 


x 0 x 
ee DSRNENcodeNRINENch 图 | 他 p- [2 @ ET rp 图 -| 8 Dp- 
EE EF 5 
将 EE 一下 ,tr 诲 全-_ 下 .Gan 

3 


实 拍 -路虎 极 光 


| 时尚 大 玩具 ! 车 展 前 实 拍 


时 尚 大 玩具 ! 车 展 前 实 | 充满 活力 的 小 家 伙 上 海藻 展 体验 
拍 嘱 虎 模 光 Coupe |  。 奥 Wa3 | 


奥 角 将 兵员 入 门 级 SUV 不 型 碳 
时 ， 大 家 都 自然 而 然 的 觉得 这 款 车 | 


| 上 奥迪 3 相 比 两 位 兄长 有 简化 也 有 复杂 化 也 综 甩 庆 | 
奥迪 93 相 比 两 位 见长 有 简 i 二 本 出 司 


图 8-11 创建 基本 表格 图 8-12 CSS 修饰 表格 


人 网 添加 CSS 代码 ， 修 饰 行 tt 和 单元 格 td 


Et 
height :30px; /* 设 置 表格 的 行 高 */ 
line-height:30px; /* 设 置 文字 行 高 */ 
站 
Ea 
width:200px; 
} 


上 面 的 代码 定义 了 table 行 的 高 度 和 文字 行 高 ， 以 及 单元 格 宽度 。 


»161°* 
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在 正 11.0 中 的 浏览 效果 如 图 8-13 所 示 。 相 比较 于 上 一 个 图 像 ， 其 表格 高 度 增 加 、 行 高 增 
加 。 


时 尚 大 玩 只 ! 车 展 前 实 拍 路 | 充满 活力 的 小 家 伙 上 海 车 } 
席 极光 Coupe 体验 黑 迪 q3 


在 人 们 面前 


| 全景 天 窗 已 经 成 为 中 高 端 SUV| 
的 流行 趋势 


图 8-13 ”设置 行 高 


8.5 综合 实例 3 一 一 变色 表格 


如 果 长 时 间 浏 览 大 量 数据 和 浏览 表格 ,即使 使 用 了 阳 行 变色 的 表格 ,阅读 时 间 长 了 仍然 会 
感到 疲劳 。 如 果 数据 行 能 动态 根据 鼠标 悬浮 来 改变 颜色 ， 就 会 使 页 面 充 满 动态 效果 ， 组 解 用 户 
的 疲劳 感 。 

本 实例 将 结合 前 面 学 习 的 知识 ， 创 建 一 个 鼠标 悬浮 的 变色 表格 ， 有 具体 操作 步骤 如 下 : 


[加 分 析 需 求 


首先 需要 建立 一 个 表格 ， 所 有 行 的 颜色 不 单独 设置 ， 统 一 采用 表格 本 身 的 背景 色 。 然 后 根 
据 CSS 设置 可 以 实现 该 效果 。 


L@ 创建 HIML 网 页 ， 实 现 table 表格 


<!DOCTYPE html> 

<html> 

<head> 

<title> 变 色 表 格 </title> 

</head> 

<body> 

<table border="0" cellpadding="0" cellspacing="1"> 
<caption> 

唐 宋 八大 家 


</caption> 


2 2 


在 正 11.0 中 的 浏览 效果 如 图 8-14 所 示 ， 表 格 不 带 边 框 ， 字 体 等 都 是 默认 显示 。 


1 到 添加 CSS 代码， 修饰 table 表格 和 单元 格 
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margin-right:auto; 
margin-bottom: Opx; 
margin-left:auto; 
text-align:center; 
background-color:#000000; 
font-size:9pt; 

} 

tad{ 
padding:5px; 
background-color:#FFFFFF; 

} 

</style> 


在 正 11.0 中 的 浏览 效果 如 图 8-15 所 示 ， 表 格 带 有 边框 ， 行 内 字体 居中 显示 ， 但 列 标题 背 
景色 为 黑色 ， 其 中 字体 不 能 够 显示 。 


也 x 口 x 
司 DA 本 书 源 代 码 \code 泊 团 ”地 | 搜索- DAVE 书 至 Bode\ 因 f 布 whOgVa9himl 国 ”他 | 按 雪 Pp: [3 
局 es 有 
Ee 下, seuor 
， 家 
苏 谍 水 调 歌 忒 
苏牧 栾 城 集 加 en 
曾 册 上 欧阳 命 人 书 由 ER 
安 右 伤 仲 永 EF 信人 水 
图 8-14 创建 基本 表格 图 8-15 设置 表格 样式 


i@ 则 添加 CSS 代码， 修饰 标题 


captiont{ 
font-size:36px; 
font-family: "黑体", "宋体 "; 
padding-bottom:15px; 

于 

ER 
font-size:13px; 
background-color:#cad9ea; 
color:#000000; 

1 

七 h{ 
padding:5px; 

-hui tdf 
background-color:#f5fafe; 
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在 上 面 的 代码 中 ,使 用 了 类 选择 器 hui 来 定义 每 个 td 行 所 显示 的 背景 色 ， 此 时 需要 在 表格 
中 每 个 奇数 行 都 引入 该 类 选择 器 ， 例 如 <tr class="hui">， 从 而 设置 奇数 行 背 景色 。 这 和 第 一 个 
综合 实例 中 对 奇数 行 背景 色 的 设置 方式 是 不 一 样 的 。 

在 正 11.0 中 的 浏览 效果 如 图 8-16 所 示 。 表 格 中 列 标 题 一 行 背 景色 显示 为 浅 蓝 色 ， 并 且 表 
格 中 奇数 行 背景 色 为 浅 灰 色 、 偶 数 行 背 景色 为 默认 白色 。 


全 网 添加 CSS 代码 ， 实 现 鼠 标 悬 浮 变色 


tr:hover tdfi 
background-color:#FF9900; 


} 
在 下 11.0 中 的 浏览 效果 如 图 8-17 所 示 。 当 鼠标 放 到 不 同行 上 时 背景 色 会 发 生 改 变 。 


ema 丁 7] 信安 各 全 mm i 5- . 
a se 
唐宁 八大 家 唐 宋 八大 家 
= 二 = 了 [可 py 
ps a | | 纪 二 
加 2 | ee 
9 ET | mm | ET | 
图 8-16 设置 奇数 行 背景 色 图 8-17 鼠标 悬浮 改变 颜色 


8.6 ”综合 实例 4 一 一 登录 表单 


在 网 页 设计 时 ， 构 建 一 个 登录 表单 是 非常 常见 的 事情 。 登 录 表 单 在 验证 用 户 时 扮演 着 重要 
的 角色 ， 可 以 保护 一 些 敏感 数据 不 被 非法 用 户 访问 。 设 计 和 构建 登录 表单 时 ， 尽 量 使 其 简单 
并 且 避 免 将 一 个 表单 用 于 多 个 任务 。 

本 实例 将 结合 前 面 学 习 的 知识 创建 一 个 简单 的 登录 表单 ， 具 体操 作 步 骤 如 下 


到 分 析 需 求 

创建 一 个 登录 表单 ， 需 要 包含 三 个 表单 元 素 : 一 个 名 称 输入 框 ， 一 个 密码 输入 框 和 两 个 按 
钮 。 然 后 添加 一 些 CSS 代码 对 表单 元 素 进行 修饰 即 可 。 

名 到 创建 HTML 网页， 实现 表单 


<!DOCTYPE html> 
<html> 
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<head> 

<title> 用 户 登录 </title> 

<body> 

<div> 

<h1> 用 户 登 录 </h1> 

<form action="" method="post"> 

姓名 : <input type="text" id=name/> 

密码 : <input type="password" id=password/> 
<input type=submit value=" 提 交 " class=button> 
<input type=reset value=" 重 置 " class=button> 
</form> 

</div> 

</body> 

</html> 


上 面 的 代码 创建 了 一 个 div 层 ， 用 来 包含 表单 及 其 元 素 。 
在 正 11.0 中 的 浏览 效果 如 图 8-18 所 示 。 页 面 中 显示 了 一 个 表单 ， 其 中 包含 两 个 输入 框 和 
两 个 按钮 ， 输 入 框 用 来 获取 姓名 和 密码 ， 按 钮 分 别 为 【提交 】 按 钮 和 【 重 置 】 按 钮 。 


上 @ 添加 CSS 代码 ， 修 饰 标题 、 层 、 输 入 框 和 按钮 


<style> 
hl{ 
font-size:20px; 
1 

divt{ 
width:200px; 
padding:lem 2em 0 2em; 
font-size:12px; 

. 

#name, #password{ 
border:lpx solid #ccc; 
width:160px; 
height:22px; 
padding-left:20px; 
margin:6px 0; 
line-height:20px; 

} 

.button{margin:6px 0;} 

</style> 


在 正 11.0 中 的 浏览 效果 如 图 8-19 所 示 。 标 题 变 小 了 ， 并 且 密 码 输 入 框 换行 显示 ， 布 局 比 
原来 更 加 美观 合理 。 
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| 如 DA 本 书 源 代码 \code\ 淋 代 三 \ 国 ~ 中 | 过 要 A- © | 司 “D+\ 本 书 源 代 码 kcode 国 搜索- 
| 全 Ba * 回 |& mraa x* 刁 
诊 ER- 下 , rownE 诊 各 百度 下, 人 oi 
用 户 登 录 用 户 登录 
姓名 : 密码 : 提交 | [ 重 得 Ws 
密码 
| 提交 | 重量 
图 8-18 创建 登录 表单 图 8-19 登录 表单 最 终 效果 


在 上 面 的 代码 中 ， 设 置 了 标题 大 小 为 20px、div 层 宽 度 为 200px、 层 中 字体 大 小 为 12px、 
输入 框 长 度 变 短 、 输 入 框 边框 变 小 并 且 表 单元 素 之 间距 离 增 大 ， 使 页 面 布局 更 加 合理 。 


8.7 ”综合 实例 5 一 一 注册 表单 


不 管 是 在 线 交 易 验 证 、 评 论 新 文章 还 是 管理 某 个 应 用 , Web 表单 总 会 出 现在 人 们 的 视线 中 。 
在 网 页 上 ，Web 表单 把 用 户 、 信 息 、Web 产品 或 者 服务 连接 了 起 来 。 它 们 能 促进 销售 、 捕 捉 用 
户 行为 、 建 立 沟 通 与 交流 。 

在 本 实例 中 ， 将 使 用 表单 内 的 各 种 元 素来 开发 一 个 网 站 的 注册 页 面 ， 并 用 CSS 样式 来 美 
化 这 个 页 面 效果 ， 有 具体 操作 步骤 如 下 : 


人 @ 同 分 析 需 求 


注册 表单 通常 包含 三 个 部 分 : 在 页 面 上 方 给 出 标题 ， 标 题 下 方 是 正文 部 分 〈 表 单元 素 ) ， 
最 下 方 是 表单 元 素 提交 按钮 。 在 设计 这 个 页 面 时 ， 需 要 把 “用 户 注 册 ” 标 题 设置 成 hl 大 小 ， 
正文 使 用 p 来 限制 表单 元 素 。 


旧闻 构建 HTML 页 面 ， 实 现 基 本 表单 


<!DOCTYPE html> 

<html> 

<head> 

<title> 注 册页 面 </title> 

</head> 

<body> 

<hl align=center> 用 户 注册 </h1> 

<form method="post"> 

<p> 姓 gnbsp; gnbsp; gnbsp; &nbsp; 名 : 

<input type="text" class=txt size="]12" maxlength="20" name="username"/> 
</p><p> 性 gnbsp; gnbsp; gnbsp; gnbsp; 别 : 

<input type="radio" name=" 性 别 " value="male"/> 男 
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<input type="radio" name=" 性 别 ” value="female"/> 女 
</p><p> 年 snbsp;&nbsp;&nbsp;snbsp; 龄 : 

<input type="text" class=txt name="age"/> 

</p> 

<p> 联 系 电话 : 

<input type="text" class=txt name="tel"/> 

</p><p> 电 子 邮件 : 

<input type="text" class=txt name="email"/> 
</p><p> 联 系 地 址 : 

<input type="text" class=txt name="address"/> 

</p> 

<p> 

<input type="submit" name="submit" value=" 提 交 " class=but/> 
<input type="reset" name="reset" value=" 清 除 " class=but/> 
</p> 

</form> 

</body> 

</html> 


在 正 11.0 中 的 浏览 效果 如 图 8-20 所 示 , 显示 一 个 注册 表单 , 包含 【用 户 注册 】 标 题 和 【 姓 
名 】、【 性 别 】、【 年 龄 】、【 联 系 方式 】、【 电 子 邮 件 】、【 地 址 】 等 输入 框 ; 以 及 【提交 】、 
【清除 】 按 钮 等 ， 其 显示 样式 为 默认 样式 。 


国 8 添加 CSS 代码 ， 修 饰 全 局 样式 和 表单 样式 


<style> 
padding:0px; 
margin:0px; 
上 

body{ 
font-family: "宋体 "; 
font-size:12px; 
} 

form{ 
width:300px; 
margin:0 auto 0 auto; 
font-size:12px; 
color:#999; 

} 

</style> 


在 正 11.0 中 的 浏览 效果 如 图 8-21 所 示 。 页 面 中 的 字体 变 小 ， 其 表单 元 素 之 间距 离 变 小 。 
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联系 电话 : CO 一 
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提交 消除 1 
图 8-20 注册 表单 显示 图 8-21 CSS 修饰 表单 样式 


[0 添加 CSS 代码 ， 修 饰 段 落 、 输 入 框 和 按钮 


form P{ 
margin:5px 0 0 Spx; 
text-align:center; 
下 
EXE 
width:200px; 
background-color:#CCCCFF; 
border:#6666FF lpx solid; 
color:#0066FF; 
} 
:butr 
border:0px#93bee2solid; 
border-bottom:#93bee21pxsolid; 
border-left:#93bee21pxsolid; 
border-right:#93bee21lpxsolid; 
border-top:#93bee21pxsolid;*/ 
background-color:#3399CC; 
cursor:hand; 
font-style:normal; 
color:#cad9ea; 
} 


在 下 11.0 中 的 浏览 效果 如 图 8-22 所 示 。 其 中 ， 表 单元 素 带 有 背景 色 ， 输 入 字体 颜色 为 蓝 
色 ， 边 框 颜色 为 浅 蓝 色 ， 按 钮 带 有 边框 ， 按 钮 上 的 字体 颜色 为 浅 色 。 
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图 8-22 设置 输入 框 和 按钮 样式 


8.8 专家 解 惑 


1. 构建 一 个 表格 需要 注意 哪些 方面 ? 

在 HIML 页 面 中 构建 表格 框架 时 ， 应 该 尽量 遵循 表格 的 标准 标记 ， 养 成 良好 的 编写 习惯 ， 
并 适当 地 利用 tab、 空 格 和 空 行 来 提高 代码 的 可 读 性 , 从 而 降低 后 期 维护 成 本 。 特别 是 使 用 table 
表格 来 布局 一 个 较 大 的 页 面 时 ， 需 要 在 关键 位 置 加 上 注释 。 

2. 在 使 用 表格 时 会 发 生 一 些 变形 ， 这 是 由 什么 原因 引起 的 呢 ? 

很 可 能 是 因为 更 改 分 辩 率 造成 的 ， 例 如 在 800X 600 的 分 辨 率 下 ， 一 切 正常 ， 而 到 了 1024 
X800 时 ， 有 的 表格 居中 ， 有 的 却 左 排列 或 右 排列 。 

表格 有 左 、 中 、 右 三 种 排列 方式 ， 如 果 没 进行 特别 设置 ， 默 认为 居 左 排列 。 在 800X600 
的 分 辩 率 下 ， 表 格 恰好 就 有 编辑 区 域 那么 宽 ， 不 容易 察觉 ， 而 到 了 1024 X800 的 时 候 ， 就 发 生 
了 变形 。 解 决 的 办 法 比较 简单 ， 即 都 设置 为 居中 、 居 左 或 居 右 。 

3. 使 用 CSS 修饰 表单 元 素 时 ， 采 用 默认 值 好 还 是 指定 值 好 ? 

各 个 浏览 器 之 间 显 示 有 所 差异 ， 其 中 一 个 原因 就 是 各 个 浏览 器 对 部 分 CSS 属性 的 默认 值 
不 同 ， 通 常 的 解决 办 法 就 是 指定 该 值 ， 不 让 浏览 器 使 用 默认 值 。 


攻克 全 全 


第 9 章 “CSS3 美 化 图 像 


一 个 网 页 如 果 都 是 文字 ,时 间 长 了 会 给 浏览 者 枯燥 的 感觉 而 一 张 恰如其分 的 图 片 会 给 网 
页 带 来 许多 生 趣 。 图 片 是 直观 、 形 象 的 ， 一 张 好 的 图 片 会 给 网 页 很 高 的 点 击 率 。 在 CSS3 中 ， 
定义 了 很 多 用 来 美化 和 设置 图 片 的 属性 。 


9.1 图 片 样式 


如 果 多 张 图 片 直 接 放置 到 网 页 ， 而 不 加 修饰 ， 就 会 给 人 一 种 凌乱 的 感觉 。 通 过 CSS3 属性 
统一 管理 ， 可 以 定义 多 张 图 片 的 各 种 属性 ， 例 如 图 片 边框 、 图 片 缩放 。 


9.1.1 ”图片 边框 


在 网 页 中 放置 一 张 图 片 ， 可 以 使 用 <img> 标 记 ， 这 在 第 2 章 中 已 经 介绍 过 了 。 当 图 片 显示 
之 后 ， 其 边框 是 否 显示 可 以 通过 <img> 标 记 中 的 描述 属性 border 来 设 定 ， 其 示例 代码 为 : 


<img src="yueji.jpg" border="3"> 


通过 HTML 标记 设置 图 片 边框 ， 其 边框 显示 都 是 黑色 并 且 风 格 比较 单一 ， 唯 一 能 够 设 定 
的 就 是 边框 的 粗细 ， 而 对 边框 样式 基本 上 是 无 能 为 力 。 这 时 可 以 采用 CSS3 对 边框 样式 进行 美 
化 。 

在 CSS3 中 ,使 用 border-style 属性 定义 边框 样式 ， 即 边框 风格 。 例 如 ， 可 以 设置 边框 风格 
为 点 线 式 边 框 (dotted) 、 破 折线 式 边 框 (dashed) 、 直 线 式 边框 (solid) 、 双 线 式 边框 (double) 
等 。border-style 属性 的 详细 信息 会 在 第 7 章 中 进行 详细 介绍 ， 这 里 就 不 再 重复 了 。 


【 例 9.1】 实例 文件 : ch09\9.1.html) 


<!DOCTYPE html> 
<html> 

<head> 
<title> 图 片 边框 </title> 
</head> 

<body> 


精通 HTML54CS53+JavaScript 网 页 设计 〈 视 频 教学 版 ) 《第 2 版 ) 


<img src="yueji.jpg" border="3" style="border-style:dotted"> 
<img src="yueji.jpg" border="3" style="border-style:dashed"> 
</body> 
</html> 


在 正 11.0 中 的 浏览 效果 如 图 9-1 所 示 。 网 页 中 显示 了 两 张 图 片 ， 其 样式 分 别 为 点 线 式 和 
破 折线 。 


站 ”DVR 天 人 四 Modec\ 再 Echog\9.1 html -0 er Pp- 如 
BE 3 
pg) aan EM) WN ROT woD 


EE GE 


图 9-1 边框 显示 


另外 ， 如 果 需 要 单独 定义 边框 一 边 的 样式 ， 可 以 使 用 border-top-style 设 定 上 边框 样式 、 
border-right-style 设 定 右边 框 样式 、border-bottom-style 设 定 下 边框 样式 和 border-left-style 设 定 
左边 框 样式 。 


【 例 9.2】 实例 文件 : ch09\9.2.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 图 片 边框 </title> 

</head> 

<body> 

<img src="yueji.jpg" border="3" 
style="border-top-style:dotted;border-right-style:insert;border-bottom-styl 
e:dashed;border-left-style:groove"> 

</body> 

</html> 


在 正 11.0 中 的 浏览 效果 如 图 9-2 所 示 。 网 页 中 显示 了 一 张 图 片 ， 图 片 的 上 边框 、 下 边框 、 
左边 框 和 右边 框 分 别 以 不 同样 式 显示 。 


CSS3 美化 图 像 第 9 党 


司 “Dx 本 书 大 多 vode 国 - 中 搜 索 - Pp- 
| 后 图 Hw 在 
启 各 百度 一下 , 你 疙 


图 9-2 四 种 样式 边框 显示 
对 于 边框 的 其 他 样式 设置 这 里 就 不 再 介绍 了 ， 会 在 第 10 章 中 进行 详细 的 介绍 。 


9.1.2 图片 缩 放 

在 网 页 上 显示 一 张 图 片 时 ,默认 情况 下 都 是 以 图 片 的 原始 大 小 显示 。 如 果 要 对 网 页 进行 排版 ， 
通常 情况 下 还 需要 对 图 片 的 大 小 进行 重新 设 定 。 如 果 对 图 片 设置 不 恰当 ,就 会 造成 图 片 的 变形 和 
失真 , 所 以 一 定 要 保持 宽度 和 高 度 属性 的 比例 适中 。 对 于 图 片 大 小 设 定 , 可 以 采用 以 下 三 种 方式 。 

1. 使 用 描述 标记 属性 width 和 height 

在 HTML 标记 语言 中 ,通过 <img> 标 记 的 描述 属性 height 和 width 可 以 设置 图 片 大 小 。width 
和 height 分 别 表示 图 片 的 宽度 和 高 度 ， 其 中 二 者 的 值 可 以 为 数值 或 百分比 ,单位 是 px。 需 要 注 
意 的 是 ， 高 度 属性 heigt 和 宽度 属性 width 设置 要 求 相同 。 


【 例 9.3】 《实例 文件 : ch09\9.3.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 图 片 边框 </title> 

</head> 

<body> 

<img src="feng.jpg" width=200 height=120> 
</body> 

</html> 


在 正 11.0 中 的 浏览 效果 如 图 9-3 所 示 。 网 页 中 显示 了 一 张 图 片 ， 其 宽度 为 200px、 高 度 为 
120px。 
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图 9-3 HTML 标记 设 定 图 片 大 小 


2. 使 用 CSS3 中 的 max-width 和 max-height 

max-width 和 max-height 分 别 用 来 设置 图 片 宽度 最 大 值 和 高 度 最 大 值 ,在 定义 图 片 大 小 时 ， 
如 果 图 片 默认 尺寸 超过 了 定义 的 大 小 ， 就 以 max-width 所 定义 的 宽度 值 显示 ， 而 图 片 高 度 将 同 
比例 变化 ， 定 义 max-height 也 是 一 样 的 道理 。 如 果 图 片 的 尺寸 小 于 最 大 宽度 或 者 高 度 ， 那 么 图 
片 就 按 原 尺寸 大 小 显示 。max-width 和 max-height 的 值 一 般 是 数值 类 型 ， 其 语法 格式 如 下 : 


img{ 
max-height:180px; 
} 


【 例 9.4】 实例 文件 : ch09\9.4.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 图 片 边框 </title> 

<style> 

img{ 
max-height:180px; 

} 

</style> 

</head> 

<body> 

<img src="feng.jpg"> 

</body> 

</html> 


在 正 11.0 中 的 浏览 效果 如 图 9-4 所 示 。 网 页 中 显示 了 一 张 图 片 ， 其 显示 高 度 是 180px， 宽 
度 做 同比 例 缩放 。 
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图 9-4 同比 例 缩放 图 片 
在 本 例 中 ， 也 可 以 只 设置 max-width 来 定义 图 片 最 大 宽度 ， 而 让 高 度 自动 缩放 。 
3. 使 用 CSS3 中 的 width 和 height 


在 CSS3 中 ， 可 以 使 用 属性 width 和 height 来 设置 图 片 宽度 和 高 度 ， 从 而 达到 对 图 片 的 
缩放 效果 。 


【 例 9.5】 实例 文件 : ch09\9.5.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 图 片 边框 </title> 

</head> 

<body> 

<img src="feng.jpg"> 

<img src="feng.jpg" style="width:90px;height:100px"> 
</body> 

</html> 


在 正 11.0 中 的 浏览 效果 如 图 9-5 所 示 。 网 页 中 显示 了 两 张 图 片 ， 第 一 张 图 片 以 原始 大 小 
显示 ， 第 二 张 图 片 以 指定 大 小 显示 。 


@ 7 ors - 0 [mx 5D- 
EL x 回 
凋 > am-_T, qepom 


图 9-5 CSS 指定 图 片 大 小 
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EE 身 会 自动 等 纵横 比例 缩放 。 只 设 定 height 属性 也 是 一 样 的 道理 。 只 有 当 同 时 设 定 


m9 需要 注意 的 是 ， 当 仅仅 设置 了 图 片 的 width 属性 而 没有 设置 height 属性 时 ， 图 片 本 
技 
width 和 height 属性 时 才 会 不 等 比例 缩放 。 


9.2 ”对齐 图 片 


一 个 凌乱 的 图 文 网 页 是 每 一 个 浏览 者 都 不 喜欢 看 的 ， 而 一 个 图 文 并 茂 、 排 版 格式 整洁 简约 
的 页 面 更 容易 让 网 页 浏览 者 接受 ， 可 见 图 片 的 对 齐 方式 是 非常 重要 的 。 本 节 将 介绍 使 用 CSS3 
属性 定义 图 文 对 齐 方式 。 


9.2.1 横向 对 齐 方式 


所 谓 图 片 横向 对 齐 ， 就 是 在 水 平方 向 上 进行 对 齐 ， 其 对 齐 样式 和 文字 对 齐 比较 相似 ， 都 有 
三 种 对 齐 方 式 ， 分 别 为 左 对 齐 、 居 中 对 齐 和 右 对 齐 。 

如 果 要 定义 图 片 对 齐 方 式 ， 不 能 在 样式 表 中 直接 定义 图 片 样式 ， 需 要 在 图 片 的 上 一 个 
标记 级 别 〈 父 标记 ) 定义 对 齐 方式 ， 让 图 片 继承 父 标 记 的 对 齐 方式 。 之 所 以 这 样 定义 父 标 
记 对 齐 方式 , 是 因为 img (图 片 ) 本 身 没 有 对 齐 属性 , 需要 使 用 CSS 继承 父 标记 的 text-align 
来 定义 对 齐 方 式 。 


【 例 9.6】〔 实 例文 件 : ch09\9.6.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 图 片 横向 对 齐 </title> 

</head> 

<body> 

<p style="text-align:left"><img src="mudan.jpg" style="max-width:140px;"> 
图 片 左 对 齐 </p> 

<p style="text-align:center"><img src="mudan.jpg" 
style="max-width:140px; "> 图 片 居中 对 齐 </p> 

<p style="text-align:right"><img src="mudan.jpg" 
style="max-width:140px; "> 图 片 右 对 齐 </p> 

</body> 

</html> 


在 正 11.0 中 的 浏览 效果 如 图 9-6 所 示 。 网 页 上 显示 三 张 图 片 ， 大 小 一 样 ， 但 对 齐 方式 分 
别 是 左 对 齐 、 居 中 对 齐 和 右 对 齐 。 
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图 9-6 图 片 横向 对 齐 


9.2.2 ”纵向 对 齐 方式 


纵向 对 齐 就 是 垂直 对 齐 ， 即 在 垂直 方向 上 和 文字 进行 搭配 使 用 。 通 过 对 图 片 的 垂直 方向 上 
的 设置 , 可 以 设 定 图 片 和 文字 的 高 度 一 致 。 在 CSS3 中 , 对 于 图 片 纵向 设置 , 通常 使 vertical-align 


属性 来 定义 。 


vertical-align 属性 设置 元 素 的 垂直 对 齐 方式 ， 即 定义 行内 元 素 的 基线 相对 于 该 元 素 所 在 行 
的 基线 的 垂直 对 齐 。 人 允许 指 定 负 的 长 度 值 和 百分比 值 ， 这 会 使 元 素 降 低 而 不 是 升 高 。 在 表单 元 
格 中 ， 这 个 属性 会 设置 单元 格 框 中 内 容 的 对 齐 方式 ， 其 语法 格式 为 


vertical-align:baseline|subl|superl|ltopltext-toplmiddle|bottom|text-botto 


mllength 


上 面 参数 的 含义 如 表 9-1 所 示 。 


表 9-1 纵向 对 齐 参数 含义 


参数 名 称 说 明 

baseline 支持 valign 特性 的 对 象 内 容 与 基线 对 齐 

sub 垂直 对 齐 文本 的 下 标 

super 垂直 对 齐 文 本 的 上 标 

top 将 支持 valign 特性 的 对 象 的 内 容 与 对 象 项 端 对 齐 

text-top 将 支持 valign 特性 的 对 象 的 文本 与 对 象 项 端 对 齐 

middle 针 支 持 valign 特性 的 对 象 的 内 容 与 对 象 中 部 对 齐 

bottom 将 支持 valign 特性 的 对 象 的 文本 与 对 象 底 端 对 齐 

text-bottom 各 支持 valign 特性 的 对 象 的 文本 与 对 象 底 端 对 齐 

length 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 或 者 百分数 ， 可 为 负数 ， 定 义 由 基线 算 起 的 


偏 移 量 。 基 线 对 于 数值 来 说 为 0， 对 于 百分数 来 说 就 是 0 
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【 例 9.7】 实例 文件 : ch09\9.7.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 图 片 纵向 对 齐 </title> 

<style> 

img{ 

max-width:100px; 

} 

</style> 

</head> 

<body> 

<p> 纵 向 对 齐 方式 :baseline<img src=mudan.jpg 
style="vertical-align:baseline"></p> 

<p> 纵 向 对 齐 方式 :bottom<img src=mudan.jpg 
style="vertical-align:bottom"></p> 

<p> 纵 向 对 齐 方式 :middle<img src=mudan.jpg 
style="vertical-align:middle"></p> 

<p> 纵 向 对 齐 方式 :sub<img src=mudan.jpg style="vertical-align:sub"></p> 

<p> 纵 向 对 齐 方式 :super<img src=mudan.jpg style="vertical-align:super"></p> 

<p> 纵 向 对 齐 方式 :数值 定义 <img src=mudan.jpg style="vertical-align:20px"></p> 

</body> 

</html> 


在 正 11.0 中 的 浏览 效果 如 图 9-7 所 示 。 网 页 中 显示 6 张 图 片 , 垂直 方向 上 分 别 是 baseline、 
bottom、middle、sub、super 和 数值 定义 对 齐 。 


仔细 观察 图 片 和 文字 的 不 同 对 齐 方式 ， 即 可 深刻 理解 各 种 纵向 对 齐 的 不 同 之 处 。 
枝 巧 提示 


x 
DNVode\RNE 者 ”人 | 全 Pp- [3 


三 因 上 WN 对 并 6 


部 下. OU 


纵 问 对 齐 方式 :baselin 


纵 疝 对 齐 方式 :bottoa 


纵向 对 齐 方式 :middl 寓 二 
Ka 


纵 问 对 齐 方式 :sa 


图 9-7 图 片 纵向 对 齐 


纵向 对 齐 方式 :super 


纳 向 对 齐 方式 :数值 定义 
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9.3 图 文 混 排 


排版 一 个 网 页 ， 最 常见 的 方式 就 是 图 文 混 排 。 文 字 说 明 主题 ， 图 像 显示 新 闻 情 境 ， 二 者 结 
合 起 来 相得益彰 。 本 节 将 介绍 图 片 和 文字 的 排版 方式 。 


9.3.1 文字 环绕 


在 网 页 中 进行 排版 时 ， 可 以 将 文字 设置 成 环绕 图 片 的 形式 ， 即 文字 环绕 。 文 字 环 绕 应 用 非 
常 广泛 ， 如 果 再 配合 背景 可 以 达到 绚丽 的 效果 。 

在 CSS3 中 ， 可 以 使 用 float 属性 来 定义 该 效果 。float 属性 主要 定义 元 素 在 哪个 方向 浮动 。 
一 般 情况 下 这 个 属性 应 用 于 图 像 元 素 , 使 文本 围绕 在 图 像 周 围 , 有 时 也 可 以 定义 其 他 元 素 浮动 。 
浮动 元 素 会 生成 一 个 块 级 框 ， 而 不 论 它 本 身 是 何 种 元 素 。 如 果 浮 动 非 蔡 换 元 素 ， 就 要 指定 一 个 
明确 的 宽度 ， 否 则 它们 会 尽 可 能 地 窄 。 

float 语法 格式 如 下 所 示 。 


float:none|lleft|right 


其 中 ，none 表示 默认 值 对 象 不 漂浮 ，left 表示 文本 流向 对 象 的 右边 ，right 表示 文本 
| 沈 向 对 象 的 左边 


【 例 9.8】 实例 文件 ，ch09\9.8.html) 

<!DOCTYPE html> 

<html> 

<head> 

<title> 文 字 环绕 </title> 

<style> 

img{ 

max-width:120px; 

float:left; 

</style> 

</head> 

<body> 

<p> 

一 个 可 爱 的 小 家 伙 乘 着 风 儿 顽皮 地 落 在 了 我 的 肩 上 ， 我 低头 看 了 看 ， 原 来 是 一 片 枫叶 。 

<img src="fengye.jpg"> 

我 小 心 翼 翼 地 把 它 捧 在 手中 ， 一 阵风 儿 吹 过 ， 叶 子 的 几 个 小 尖 脚 随 风 摆 起 ， 多 像 婴 儿 的 小 手掌 啊 ! 
平滑 的 叶 面 ， 清 晰 的 脉络 ， 十 分 柔软 细嫩 。 枫 叶 树种 在 秋冬 的 时 候 ， 体 内 会 产生 一 些 化 学 反应 ， 让 原本 
树叶 中 所 含 枫叶 (10 张 ) 的 物质 或 部 分 组 织 分 解 之 后 ， 回 收 储藏 在 茎 或 根 的 部 位 ， 来 年 春天 的 时 候 可 以 再 
利用 ， 叶 绿 体 、 叶 绿 素 就 是 被 分 解 回收 的 对 象 之 一 ， 因 为 叶绿素 的 含量 较 大 而 遮盖 了 其 他 颜色 ， 使 叶片 
旦 绿色 。 因 此 当 叶 子 里 的 叶绿素 没有 了 的 时 候 ， 其 他 色素 的 颜色 彰显 出 来 ， 如 花 青 素 的 红色 、 胡 萝卜 素 
的 黄色 和 叶 黄 素 的 黄色 等 。 除 此 之 外 ， 枫 叶 中 贮存 的 糖分 还 会 分 解 转 变 成 花 青 素 ， 使 叶片 的 颜色 更 加 艳 
丽 、 火 红 。 枫叶 没有 五 个 "手指 "就 不 是 枫叶 ， 而 且 ， 枫 叶 的 “五 指 ” 上 具有 锯齿， 这 是 枫叶 的 特色 ! 
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</p> 

</body> 

</html> 

在 下 11.0 中 的 浏览 效果 如 图 9-8 所 示 ， 可 以 看 到 图 片 被 文字 所 环绕 ， 并 在 文字 的 左 方 显 
示 。 如 果 将 float 属性 的 值 设置 为 right， 那 么 图 片 将 会 在 文字 右 方 显示 并 环绕 。 


色 , 因此 : 的 时 
色 、 胡 萝卜 素 的 黄色 和 | 
成 花 青 素 ， 使 叶片 的 本 要 | 
枫叶 的 “五 指 ” 上 具有 句 元 ， 这 是 枫叶 的 特色 ! 


图 9-8 文字 环绕 效果 
9.3.2 ”设置 图 片 与 文字 间距 


如 果 需 要 设置 图 片 和 文字 之 间 的 距离 (文字 之 间 存 在 一 定 间 距 ， 而 不 是 紧 紧 环绕 ) ， 可 以 
使 用 CSS3 中 的 属性 padding 来 设置 。 

padding 属性 主要 用 来 在 一 个 声明 中 设置 所 有 内 边 距 属性 ， 即 可 以 设置 元 素 所 有 内 边 距 的 
宽度 ,或 者 设置 各 边 上 内 边 距 的 宽度 。 如 果 一 个 元 素 既 有 内 边 距 又 有 背景 ， 从 视觉 上 看 可 能 会 
延伸 到 其 他 行 ， 有 可 能 还 会 与 其 他 内 容重 营 。 设 置 时 不 允许 指定 负 边 距 值 。 

其 语法 格式 如 下 所 示 : 


padding:padding-toplpadding-right|padding-bottom|lpadding-left 


其 参数 值 padding-top 用 来 设置 距离 顶部 内 边 距 ，padding-right 用 来 设置 距离 右 部 内 边 距 ; 
padding-bottom 用 来 设置 距离 底部 内 边 距 ，padding-left 用 来 设置 距离 左 部 内 边 距 。 


【 例 9.9】 《实例 文件 :ch09\9.9.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 文 字 环绕 </title> 

<style> 

img{ 

max-width:120px; /* 设 置 图 像 的 最 大 宽度 */ 
float:left; /* 设 置 图 像 靠 左 显示 */ 
padding-top:10px; /* 设 置 图 像 的 上 内 边 距 */ 
padding-right:50px; /* 设 置 图 像 的 右 内 边 距 */ 
padding-bottom:10px; /* 设 置 图 像 的 下 内 边 距 */ 
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} 

</style> 

</head> 

<body> 

<p> 一 个 可 爱 的 小 家 伙 乘 着 风 儿 顽皮 地 落 在 了 我 的 肩 上 ， 我 低头 看 了 看 ， 原 来 是 一 片 枫叶 。 

<img src="fengye.jpg"> 

我 小 心 翼 翼 地 把 它 捧 在 手中 ， 一 阵风 儿 吹 过 ， 叶 子 的 几 个 小 尖 脚 随 风 摆 起 ， 多 像 婴 儿 的 小 手掌 啊 ! 
平滑 的 叶 面 ， 清 晰 的 脉络 ， 十 分 柔软 细嫩 。 枫 叶 树 种 在 秋冬 的 时 候 ， 体 内 会 产生 一 些 化 学 反应 ， 让 原本 
树叶 中 所 含 枫叶 (10 张 ) 的 物质 或 部 分 组 织 分 解 之 后 ， 回 收 储藏 在 茎 或 根 的 部 位 ， 来 年 春天 的 时 候 可 以 再 
利用 ， 叶 绿 体 、 叶 绿 素 就 是 被 分 解 回 收 的 对 象 之 一 ， 因 为 叶绿素 的 含量 较 大 而 遮盖 了 其 他 颜色 ， 使 叶片 
呈 绿 色 。 因 此 当 叶 子 里 的 叶绿素 没有 了 的 时 候 ， 其 他 色素 的 颜色 彰显 出 来 ， 如 花 青 素 的 红色 、 胡 萝卜 素 
的 黄色 和 叶 黄 素 的 黄色 等 。 除 此 之 外 ， 枫 叶 中 贮存 的 糖分 还 会 分 解 转变 成 花 青 素 ， 使 叶片 的 颜色 更 加 艳 
丽 、 火 红 。 枫叶 没有 五 个 "手指 "就 不 是 枫叶 , 而 且 , 枫叶 的 “五 指 ” 上 具有 锯齿 , 这 是 枫叶 的 特色 !</p> 

</body> 

</html> 


在 正 11.0 中 的 浏览 效果 如 图 9-9 所 示 。 图 片 被 文字 所 环绕 ， 并 且 文字 和 图 片 右边 间距 为 
50px、 上 下 各 为 10px。 


部 DA 本 朱 代码 \code 灿 图 ”| 搜索 万 - 图 
ES x x 


请 SEE 下, ni 


图 9-9 设置 图 片 和 文字 边 距 


9.4 综合 实例 1 句 话 新 闻 


在 各 大 网 站 中 ， 点 击 率 最 高 的 通常 是 新 闻 ， 因 为 人 们 每 天 都 在 不 停 地 浏览 新 闻 。 新 闻 格式 
要 求 简洁 明了 、 文 字 表达 清楚 , 配 上 图 片 更 是 图 文 并 茂 。 对 于 网 页 新 闻 排版 , 根据 其 新 闻 内 容 ， 
可 以 有 一 句 话 新 闻 。 本 实例 将 介绍 如 何 配合 图 片 设 计 出 一 句 话 新 闻 的 网 页 版 面 , 具体 步骤 如 下 : 


L 国 分 析 需 求 。 


在 本 实例 中 ， 如 果 要 显示 一 句 话 新 闻 ， 需 要 包含 两 个 部 分 : 一 个 是 新 闻 标题 ， 一 个 是 新 闻 
内 容 。 新 闻 内 容 可 以 是 图 片 和 段落 文字 。 此 处 可 以 使 用 div 将 两 个 部 分 分 成 不 同 的 层次 。 
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Lo 到 构建 HTML 页 面 。 


页 面 中 包含 的 这 两 个 部 分 可 以 使 用 三 个 <div> 标 记 来 进行 层次 划分 :一 个 div 包含 整个 一 句 
话 新 闻 ， 一 个 div 包含 标题 (标题 可 以 分 为 正 标题 和 副标题 》， 一 个 div 包含 图 片 和 段落 。 其 
代码 如 下 所 示 。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 时 事 新 闻 </title> 

<style> 

</style> 

</head> 

<body> 

<div> 

<div> 

<p> 英 国 皇家 国际 航 展开 幕 </p> 

<p>2011-07-17 09:38 来 源 : 新 华 网 </p> 

</div> 

<div> 

<p align=center> 

<img src=feiji.jpg border=1> 

<p> 

<p> 

7 月 16 日 ， 在 英国 的 费 尔 福 德 ， 一 架 A-10 攻 击 机 进行 飞行 表演 。 为 期 2 天 的 英国 皇家 国际 航 展 当日 
在 费 尔 福 德 空军 基地 开幕 ， 这 是 世界 上 规模 最 大 的 军用 飞机 航空 展 之 一 。 

</p> 

</div> 

</div> 

</body> 

</html> 


在 下 11.0 中 的 浏览 效果 如 图 9-10 所 示 ， 在 网 页 中 显示 了 段落 、 图 片 和 标题 。 
gj 添加 CSS 代码 ， 修 饰 整体 div。 
<style> 


.da{border:#0033FF lpx solid;} 
</style> 


人 @ 细 在 HIML 代码 中 使 用 类 标识 符 指 向 da。 


<div class=da> 

<div > 

<p > 英国 皇家 国际 航 展 开幕 </p> 

<p >2011-07-17 09:38 来 源 : 新 华 网 </p> 
</div> 


CSS3 美化 图 像 第 9 党 


<div> 

<p align=center> 

<img src=feiji.jpg border=1> 

<p> 

7 月 16 日 ， 在 英国 的 费 尔 福 德 ， 一 架 A-10 攻 击 机 进行 飞行 表演 。 为 期 2 天 的 英国 皇家 国际 航 展 当 日 
在 费 尔 福 德 空军 基地 开幕 ， 这 是 世界 上 规模 最 大 的 军用 飞机 航空 展 之 一 。 

</p> 

</div> 

</div> 


人 @ 名 在 正 11.0 中 的 浏览 效果 如 图 9-11 所 示 。 在 网 页 中 显示 了 一 个 边框 ， 并 且 段 落 、 图 片 
包含 在 边框 里 面 。 


oo x = 
vodeg  - O| MR 万 - [| CE EY 万 = ad 

EE = 国 [em 加 

痛 ne a 

蛮 国 皇家 国际 用 展 开幕 本 皇家 国际 各 展 开标 


2011-07-17 09:38 来 源 : 新 华 网 11-07-17 09:39 来 源 : 新 中 奖 


月 16 日 ， 在 英国 的 费 尔 神往 一 架 A-10 攻 击 机 进行 飞行 表 洽 。 为 山 2 天 的 英国 音 家 国 | 
肌 展 当日 在 惕 尔 祖 往 空 下 基地 开 瘟 ， 这 是 世界 上 规模 最 大 的 军用 飞机 航空 展 之 一 


7 月 16 日 ， 在 英国 的 | 
奈 贞 展 当日 在 筑 尔 


， 一 积 A-10 政 击 机 进行 飞行 表 注 。 为 期 2 天 的 英国 皇家 国 
基地 开 挛 ， 这 是 世界 上 规模 最 大 的 军用 飞机 航空 展 之 一 


图 9-10 基本 层次 划分 图 9-11 CSS 整体 修饰 
gj 添加 CSS 代码 ， 修 饰 正 标题 和 副标题 。 


.title{color:blue;font-size:25px;text-align:center} /* 设 置 正 标题 样式 */ 
-xtitle{ /* 设 置 副 标题 样式 */ 

text-align:center; 

font-size:13px; 

color:gray’; 
} 


国 在 HTML 代码 中 ， 引 用 上 面 两 个 类 标识 符 。 


<div class=da> 

<div> 

<p class=title> 英 国 皇家 国际 航 展开 幕 </p> 

<p class=xtitle>2011-07-17 09:38 来 源 : 新 华 网 </p> 
</div> 

<div> 

<p align=center> 

<img src=feiji.jpg border=1> 

<p> 

<p> 
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7 月 16 日 ， 在 英国 的 费 尔 福 德 ， 一 架 A-10 攻 击 机 进行 飞行 表演 。 为 期 2 天 的 英国 皇家 国际 航 展 当日 
在 费 尔 福 德 空军 基地 开幕 ， 这 是 世界 上 规模 最 大 的 军用 飞机 航空 展 之 一 。 

</p> 

</div> 

</div> 


罗 8 在 正 11.0 中 的 浏览 效果 如 图 9-12 所 示 。 在 网 页 中 ， 正 标题 和 副标题 都 居中 显示 ， 并 
且 正 标题 以 蓝 色 显 示 、 大 小 为 25px， 副 标题 以 灰色 显示 、 大 小 为 13px。 
用 9 添加 CSS 代码 ， 修 饰 图 片 。 
img{ 
border-top-style:solid; /* 设 置 图 像 的 上 边框 样式 为 实 线 */ 
border-right-style:dashed; /* 设 置 图 像 的 右边 框 样式 为 虚线 */ 


border-bottom-style:solid; /* 设 置 图 像 的 下 边框 样式 为 实 线 */ 
border-left-style:dashed; /* 设 置 图 像 的 左边 框 样式 为 虚线 */ 


} 

蜡 加 此 处 使 用 了 标记 标识 符 ， 会 直接 作用 于 网 页 中 的 图 片 ， 此 处 就 不 再 显示 HTML 代码 
了 。 在 正 11.0 中 的 浏览 效果 如 图 9-13 所 示 。 在 网 页 中 ， 图 片 边框 显示 了 不 同样 式 ， 上 下 以 直 
线 显示 ， 左 右 以 破 折线 显示 。 


ox a x 
可 “DNS 书 晤 ft 可 wode\ 而 ff 国 “” 员 。 他 大 万 - © 可 DAWS 书 搜 f 可 wodc\ 再 代 图 ， 员 殷实 Pp- 鲁 
|3 sm x 回 
ERD md 
英国 皇家 国际 航 展开 幕 
par 1 
英国 的 1 一 加 4-10 攻 击 机 进行 飞行 委 遍 。 为 期 2 天 的 英国 皇家 国际 [月 16 日 ， 在 英国 的 费 尔 ; -10 攻 击 机 进行 飞行 表演 。 为 期 2 天 的 英国 皇 计 汪 除 
ti Ea 尔 人 hr 这 是 世界 上 规模 最 大 的 军用 飞机 航空 展 之 : 后 展 当 日 在 费 尔 福 枪 衬 sh 本 和 村 上 规模 最 大 的 军用 飞机 航空 展 之 
图 9-12 ”修饰 标题 图 9-13 图 片 边框 样式 修饰 


因由 添加 CSS 代码 ， 修 饰 段落 。 


<p style="text-indent:10mm; font-size:15px;"> 7 月 16 日 ， 在 英国 的 费 尔 福 德 ， 一 架 
A-10 攻 击 机 进行 飞行 表演 。 为 期 2 天 的 英国 皇家 国际 航 展 当日 在 费 尔 福 德 空军 基地 开幕 ， 这 是 世界 上 规 
模 最 大 的 军用 飞机 航空 展 之 一 。 

</p> 


恒 到 在 正 11.0 中 的 浏览 效果 如 图 9-14 所 示 。 在 网 页 中 ， 段 落 缩 进 10mm， 并 且 字 体 大 小 
为 15px。 
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英国 皇家 国际 航 展开 幕 


的 
[a 而 管 宇和 站 开 届 、 志 是 和 因 上 模 入 大 的 征用 飞机 亲 冯 服 之 


图 9-14 修饰 段落 


9.5 综合 实例 2 一 一 学 校 宣传 单 


每 年 暑假 时 , 学 校 招 生 的 宣传 单 页 就 会 铺天盖地 , 到 处 都 是 。 本 实例 模仿 一 个 学 校 宣传 单 ， 
进行 图 文 混 排 ， 从 而 加 深 对 前 面 学 习 知 识 的 理解 ， 具 体 步 又 如 下 : 


L 罗 分析 需 求 。 


本 实例 包含 两 个 部 分 : 一 个 部 分 是 图 片 信息 ， 用 来 介绍 学 校场 景 ， 一 个 部 分 是 段落 信息 ， 
用 来 介绍 学 校 历史 和 理念 。 这 两 个 部 分 都 放 在 一 个 div 中 。 


i@ 到 构建 HTML 网页。 


创建 HIML 页 面 ， 页 面 中 包含 一 个 div，div 中 包含 图 片 和 两 个 段落 信息 ， 代 码 如 下 所 示 。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 学 校 宣 传单 </title> 

</head> 

<body> 

<div> 

<img src="xuexiao.jpg"/><p> 某 大 学 风景 优美 </p><p> 学 校 发 扬 “ 百 折 不 挠 、 艰 苦 创 业 ” 
的 办 学 传统 ， 坚 持 “质量 立 校 、 人 才 兴 校 、 创 新 强 校 、 文 化 铸 校 、 和 谐 荣 校 ”的 办 学 理念 ， 弘 扬 “ 爱 国 
荣 校 、 民 主 和 谐 、 求 真 务实 、 开 放 创 新 ”的 精神 </p> 

</div> 

</body> 

</html> 


在 正 11.0 中 的 浏览 效果 如 图 9-15 所 示 。 在 网 页 中 ， 标 题 和 内 容 被 一 条 虚线 隔 开 。 
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L@ 到 添加 CSS 代码， 修饰 div。 


<style> 

bigt{ 
width:430px; 
} 

</style> 


在 HTML 代码 中 ， 将 big 引用 到 div 中 ， 代 码 如 下 所 示 。 


<div class=big> 
<img src="xuexiao.jpg"/><p> 某 大 学 风景 优美 </p><p> 学 校 发 扬 “ 百 折 不 挠 、 艰 苦 创 
业 ” 的 办 学 传统 ， 坚 持 “ 质 量 立 校 、 人 才 兴 校 、 创 新 强 校 、 文 化 铸 校 、 和 谐 荣 校 ”的 办 学 理念 ， 弘 扬 “ 爱 
国 荣 校 、 民 主 和 谐 、 求 真 务实 、 开 放 创 新 ”的 精神 </p> 
</div> 


在 正 11.0 中 的 浏览 效果 如 图 9-16 所 示 。 在 网 页 中 ， 段 落 以 块 的 形式 显示 。 


图 9-15 HTML 页 面 显 示 图 9-16 修饰 div 层 


im 添加 CSS 代码 ， 修 饰 图 片 。 


img{ 
width:260px; /* 设 置 图 像 的 宽度 */ 
height:220px; /* 设 置 图 像 的 高 度 */ 
border:#009900 2px solid; /* 设 置 图 像 的 边框 颜色 、 粗 细 和 实 线 */ 
float :left; /* 设 置 图 像 向 左 浮动 */ 


padding-right:0.5px; /* 设 置 右 内 边 距 的 大 小 */ 
i 


在 正 11.0 中 的 浏览 效果 如 图 9-17 所 示 。 在 网 页 中 , 图 片 以 指定 大 小 显示 , 并且 带 有 边框 ， 
图 片 在 左 侧 被 文字 环绕 。 


胃 添加 CSS 代码， 修饰 段 落 。 
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pt{ 
font-family: "宋体"; /* 设 置 段 落 文字 的 字体 */ 
font-size:14px; /* 设 置 段 落 文字 的 大 小 */ 
line-height:20px; /* 设 置 段落 文字 的 行 高 */ 
} 


在 正 11.0 中 的 浏览 效果 如 图 9-18 所 示 。 在 网 页 中 ， 段落 以 宋体 显示 ， 大 小 为 14px， 行 高 
为 20px。 


- oO x 
@ od > ©O| | Mm. 2 @ 切 DAT 书 当 代码 \codeVWi 图 ” 忆 | 近 过- 
. | 研学 可 人间 * 回 
文件 们 ” 帝 呈 日 ”查看 (V) 收藏 天 (A) 工具 (帮助 HH) 
育 全 百 区 -下 ,430 正 


局 学 校 宣传 单 x 
文件 (F) 篇 二 日 查看 (V) 收藏 天 (A) 工具 [D) 帮助 1H) 
询 分 百度 一 下 ， 你 就 知 臣 


大 学 风量 忧 美 


图 9-17 修饰 图 片 图 9-18 ”修饰 段落 


9.6 专家 解 惑 


1. 在 网 页 中 进行 图 文 排版 时 ， 哪 些 是 必须 要 做 的 ? 
在 进行 图 文 排版 时 ， 通 常 有 如 下 5 个 方面 需要 网 页 设计 者 考虑 。 


(1) 首 行 缩 进 : 段落 的 开头 应 该 空 两 格 。HIML 中 空格 键 起 不 了 作用 , 当然 可 以 用 “nbsp;” 
来 代替 一 个 空格 ， 但 这 不 是 理想 的 方式 。 应 该 用 CSS3 中 的 首 行 缩 进 ， 且 大 小 为 2em。 
(2) 图 文 混 排 : 在 CSS3 中 ， 可 以 用 float 来 让 文字 在 没有 清理 浮动 的 时 候 显示 在 图 片 以 
外 的 空白 处 。 
(3) 设置 背景 色 : 设置 网 页 背景 以 增加 效果 。 此 内 容 会 在 后 面 介 绍 。 
(4) 文字 居中 : 可 以 用 CSS 的 text-align 设置 文字 居中 。 
(5) 显示 边框 : 通过 border 为 图 片 添加 一 个 边框 。 
2. 设置 文字 环绕 时 ，float 元 素 为 什么 会 失去 作用 ? 
很 多 浏览 器 在 显示 未 指定 width 的 float 元 素 时 会 发 生 错 误 ， 所 以 不 管 float 元 素 的 内 容 如 
何 ， 一 定 要 为 其 指定 width 属性 。 
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任何 一 个 页 面 ,首先 映 入 眼帘 的 就 是 网 页 的 背景 色 和 基调 , 不 同类 型 网 站 有 不 同 背 景 和 基 
调 。 因 此 页 面 中 的 背景 通常 是 网 站 设计 时 一 个 重要 的 步骤 。 对 于 单个 HTML 元 素 ， 可 以 通过 
CSS3 属性 设置 元 素 边框 样式 ， 包 括 宽度 、 显 示 风 格 和 颜色 等 。 本 章 将 重点 介绍 网 页 背景 设置 


10.1 背景 相关 属性 


背景 是 网 页 设计 中 的 重要 因素 之 一 ， 一 个 背景 优美 的 网 页 ， 总 能 吸引 不 少 访问 者 。 例 如 ， 
喜庆 类 网 站 都 是 火红 背景 为 主题 ，CSS 的 强大 表现 功能 在 背景 方面 同样 发 挥 得 淋漓尽致 。 


10.1.1 背景 颜色 


background-color 属性 用 于 设 定 网 页 背景 色 ， 同 设置 前 景色 的 color 属性 一 样 ， 
background-color 属性 接受 任何 有 效 的 颜色 值 ， 对 于 没有 设 定 背景 色 的 标记 ， 默 认 背 景色 为 透 
明 (transparent) 。 


其 语法 格式 为 : 
{background-color:transparent |color} 


关键 字 transparent 是 一 个 默认 值 ， 表 示 透 明 。 背 景 颜 色 color 设 定 方法 可 以 采用 英文 单词 、 
十 六 进 制 、RGB、HSL、HSLA 和 GRBA。 


【 例 10.1】 实 例文 件 : ch10\10.1.html) 

<!DOCTYPE html> 

<html> 

<head><title> 背 景色 设置 </title></head> 

<body style="background-color:PaleGreen;color:Blue"> 
<p>background-color 属 性 设置 背景 色 ，color 属 性 设置 字体 颜色 ， 即 前 景色 。</p> 
</body> 

</html> 
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在 正 11.0 中 的 浏览 效果 如 图 10-1 所 示 ， 可 以 看 到 网 页 背景 色 显 示 浅 绿色 ， 而 字体 颜色 为 
蓝 色 。 注 意 ， 在 网 页 设计 时 其 背景 色 不 要 使 用 太 艳 的 颜色 ， 和 否则 会 给 人 一 种 喧 宾 夺 主 的 感觉 。 


人 局 ”D+\ 本 书 源 代 码 ode\ 六 国 ~ 久 搜索 PP 位 
| 号 esi x 加 
请 省 百度 一 下 ， 作 Bi 和 首 


图 10-1 设置 背景 色 


background-color 不 仅 可 以 设置 整个 网 页 的 背景 颜色 ， 同 样 可 以 设置 指定 HTML 元 素 的 背 
景色 ， 例 如 设置 hl 标题 的 背景 色 、 设 置 段落 p 的 背景 色 等 。 


【 例 10.2】 《实例 文件 : chl10\10.2.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 背 景色 设置 </title> 
<style> 
he 
background-color:red; /* 设 置 标题 的 背景 颜色 为 红色 */ 
color:black; /* 设 置 标 题 的 颜色 为 黑色 */ 
text-align:center; /* 设 置 标题 的 居中 显示 */ 
} 
Pi 
background-color:gray; /* 设 置 正文 的 背景 颜色 为 灰色 */ 
color:blue; /* 设 置 正文 的 颜色 为 蓝 色 */ 
text-indent:2em; /* 设 置 文本 缩 进 */ 
} 
</style> 
</head> 
<body> 
<h1> 颜 色 设置 </h1> 
<p>background-color 属 性 设置 背景 色 ，color 属 性 设置 字体 颜色 ， 即 前 景色 。</p> 
</body> 
</html> 


在 下 11.0 中 的 浏览 效果 如 图 10-2 所 示 。 网 页 中 的 标题 区 域 背景 色 为 红色 、 段 落 区 域 背 景 
色 为 灰色 ， 并 且 分 别 为 字体 设置 了 不 同 的 前 景色 。 
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图 10-2 设置 HTML 元 素 背 景色 


10.1.2 ”背景 图 片 

网 页 中 不 但 可 以 使 用 背景 色 来 填充 网 页 背景 ,同样 也 可 以 使 用 背景 图 片 来 填充 网 页 。 通 过 
CSS3 属性 可 以 对 背景 图 片 进行 精确 定位 。 background-image 属性 用 于 设 定 标 记 的 背景 图 片 , 通 
常 在 标记 <body> 中 应 用 ， 将 图 片 用 于 整个 主体 中 。 

background-image 语法 格式 如 下 : 


background-image:nonelurl (url) 


其 默认 属性 为 无 背景 图 , 当 需 要 使 用 背景 图 时 可 以 用 url 进行 导入 。url 可 以 使 用 绝对 路 径 ， 
也 可 以 使 用 相对 路 径 。 


【 例 10.3】〔 实 例文 件 ，ch10\10.3.html) 
<!DOCTYPE html> 
<html> 
<head> 
<title> 背 景色 设置 </title> 
<style> 
body{ 
background-image:url (xiyang .jpg) 
. 
</style> 
</head> 
<body> 
<p style="font-size:20pt"> 夕 阳 无 限 好 </p> 
</body> 
</html> 


在 正 11.0 中 的 浏览 效果 如 图 10-3 所 示 。 网 页 中 显示 了 背景 图 。 如 果 图 片 大 小 小 于 整个 网 
页 大 小 ， 就 会 重复 图 片 平 铺 整个 网 页 。 
在 设 定 背 景 图 片 时 , 最 好 同时 也 设 定 背景 色 , 这 样 当 背景 图 片 因 某 种 原因 无 法 正常 显示 时 ， 
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可 以 使 用 背景 色 来 代 蔡 。 当 然 ， 如 果 正 常 显 示 ， 背 景 图 片 将 覆盖 背景 色 。 


DERNcode Rh NO htm -0 wr 3 六 多时 
[Smo * 醒 
Pe 


图 10-3 设置 背景 图 片 


10.1.3 ”背景 图 片 重复 
在 进行 网 页 设计 时 ， 通 常 都 是 一 个 网 页 使 用 一 张 背 景 图 片 ， 如 果 图 片 大 小 小 于 背景 图 片 ， 
就 会 直接 重复 平 铺 整个 网 页 ， 但 这 种 方式 不 适用 于 大 多 数 页 面 。 在 CSS 中 可 以 通过 
background-repeat 属性 设置 图 片 的 重复 方式 ， 包 括 水 平 重 复 、 垂 直 重复 和 不 重复 等 。 
background-repeat 属性 用 于 设 定 背景 图 片 是 否 重复 平 铺 。 各 属性 值 说 明 如 表 10-1 所 示 。 


表 10-1 background-repeat 属性 


背景 图 片 水 平和 垂直 方向 都 重复 平 铺 
背景 图 片 水 平方 向 重复 平 铺 


背景 图 片 垂直 方向 重复 平 铺 
背景 图 片 不 重复 平 铺 


background-repeat 属性 重复 背景 图 片 是 从 元 素 的 左上 角 开 始 平 铺 ， 直 到 水 平 、 垂 直 或 全 部 
页 面 都 被 背景 图 片 覆盖 。 


【 例 10.4】“《 实 例文 件 : ch10\10.4.html) 
<!DOCTYPE html> 

<html> 

<head> 
<title> 背 景 图 片 重复 </title> 
<style> 
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body{ 
packground-image:url (xiyang.jpg); /* 设 置 背景 图 片 */ 
background-repeat :no-repeat; /* 设 置 背 景 图 片 不 重复 平 铺 */ 

于 

</style> 

</head> 

<body> 

<p style="font-size:20pt"> 夕 阳 无 限 好 </p> 

</body> 

</html> 


在 正 11.0 中 的 浏览 效果 如 图 10-4 所 示 。 网 页 中 显示 了 背景 图 ， 但 图 片 以 默认 大 小 显示 ， 
而 没有 对 整个 网 页 背景 进行 填充 。 这 是 因为 在 代码 中 设置 了 背景 图 不 重复 平 铺 。 

同样 可 以 在 上 面 的 代码 中 设置 background-repeat 的 属性 值 为 其 他 值 ， 例 如 可 以 设置 值 为 
TIepeat-x， 表 示 图 片 在 水 平方 向 平 铺 。 此 时 ,在 正 11.0 中 的 效果 如 图 10-5 所 示 。 


图 10-4 背景 图 不 重复 图 10-5 水 平方 向 平 铺 


10.1.4 背景 图 片 显 示 

对 于 一 个 文本 较 多 、 一 屏 显 示 不 了 的 页 面 ， 如 果 使 用 的 背景 图 片 不 足以 覆盖 整个 页 面 ， 而 
且 只 将 背景 图 片 应 用 在 页 面 的 一 个 位 置 ， 那 么 在 浏览 页 面 时 会 出 现 看 不 到 背景 图 片 或 者 背景 图 
片 初 始 可 见 ， 而 随 着 页 面 的 滚动 又 不 可 见 的 情况 ， 也 就 是 说 背景 图 片 不 能 时 刻 随 着 页 面 的 滚动 
而 显示 。 

要 解决 上 述 问 题 ， 可 以 使 用 background-attachment 属性 〈 用 来 设 定 背景 图 片 是 否 随 文档 一 
起 滚动 ) 。 该 属性 包含 两 个 属性 值 : scroll 和 fixed， 并 适用 于 所 有 元 素 ， 如 表 10-2 所 示 。 


表 10-2 background-attachment 属性 值 


默认 值 ， 当 页 面 滚动 时 ， 背 景 图 片 随 页 面 一 起 滚动 


背景 图 片 固定 在 页 面 的 可 见 区 域 里 
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使 用 background-attachment 属性 ， 可 以 使 背景 图 片 始终 处 于 视野 范围 内 ， 以 避免 出 现 因 页 
面 滚动 而 消失 的 情况 。 


【 例 10.5】〔 实 例文 件 ，ch10\10.5.htnl) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 背 景 显示 方式 </title> 
<style> 
body{ 
background-image:url (xiyang.jpg); /* 设 置 背 景 图 片 */ 
background-repeat :no-repeat; /* 设 置 背 景 图 片 不 重复 平 铺 */ 
background-attachment :fixed; /* 设 置 背景 图 片 固定 在 可 见 区 域 里 */ 
i 
p{ 
text-indent :2em; /* 设 置 文本 缩 进 */ 
line-height:30px; /* 设 置 行 高 的 大 小 */ 
hl{text-align:center;} /* 设 置 标题 居中 显示 */ 
</style> 
</head> 
<body> 
<h1> 兰 亭 序 </h1> 
<p> 永 和 九 年 ， 岁 在 癸 (gui ) 丑 ， 暮 春之 初 ， 会 于 会 稽 (kuai ji) 山 阴 之 兰亭 ， 修 祺 (xi) 事 
也 。 群 贤 毕 至 ， 少 长 咸 集 。 此 地 有 崇山峻岭 ， 茂 林 修 竹 ， 又 有 清流 激 淇 (tuan〉， 映 带 左右 。 引 以 为 流 
筋 shang) 曲 (qa) 水 ， 列 坐 其 次 ， 虽 无 丝竹 管弦 之 盛 ， 一 筋 一 号， 亦 足 以 畅 叙 幽 情 。</P> 
<p> 是 日 也 ， 天 朗 气 清 ， 惠 风 和 畅 。 仰 观 宇宙 之 大 ， 俯 察 品类 之 盛 ， 所 以 游 目 对 (chsng) 怀 ， 足 
以 极 视听 之 娱 ， 信 可 乐 也 。</p> 
<p> 夫人 之 相 与 ， 俯 仰 一 世 。 或 取 诸 怀抱 ， 晤 言 一 室 之 内 ; 或 因 寄 所 托 ， 放 浪 形 艇 (h6i) 之 外 。 
虽 趣 (qii) 含 万 殊 ， 静 躁 不 同 ， 当 其 欣 于 所 遇 ， 暂 得 于 己 ， 快 然 自足 ， 不 知 老 之 将 至 。 及 其 所 之 既 倦 ， 
情 随 事 迁 ， 感 慨 系 (xi ) 之 矣 。 向 之 所 欣 ， 俯 仰 之 间 ， 已 为 陈 迹 ， 犹 不 能 不 以 之 兴 怀 。 况 修 短 随 化 ， 终 
期 于 尽 。 古 人 云 : “死生 亦 大 矣 。” 岂 不 痛 哉 ! </p> 
<p> 每 览 音 人 兴 感 之 由 ， 若 合 一 契 ， 未 尝 不 临 文 唆 (jis) 悼 ， 不 能 喻 之 于 怀 。 固 知 一 死生 为 虚 诞 ， 
齐 彭 爽 (shang) 为 亡 作 。 后 之 视 今 ， 亦 犹 今 之 视 昔 ， 翡 夫 ! 故 列 叙 时 人 ， 录 其 所 述 。 虽 世 殊 事 异 ， 所 以 
兴 怀 ， 其 致 一 也 。 后 之 览 者 ， 亦 将 有 感 于 斯 文 。</p> 
</body> 
</html> 


在 正 11.0 中 的 浏览 效果 如 图 10-6 所 示 。 网 页 background-attachment 属性 的 值 为 fxed， 背 
景 图 片 的 位 置 固定 ， 并 不 是 相对 于 页 面 的 ， 而 是 相对 于 页 面 的 可 视 范 围 。 
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图 10-6 图 片 显 示 方式 


10.1.5 ”背景 图 片 位 置 
我 们 知道 , 背景 图 片 都 从 设置 了 background 属性 网 页 的 左上 角 开 始 出 现 , 但 在 实际 网 页 设 
计 中 , 可 以 根据 需要 直接 指定 背景 图 片 出 现 的 位 置 。 在 CSS3 中 ,可 以 通过 background-position 
属性 轻松 调整 背景 图 片 位 置 。 
background-position 属性 用 于 指定 背景 图 片 在 页 面 中 所 处 的 位 置 。 该 属性 值 可 以 分 为 四 类 
绝对 定义 位 置 (length) 、 百 分 比 定义 位 置 (percentage) 、 垂 直 对 齐 值 和 水 平 对 齐 值 。 其 中 重 
直 对 齐 值 包括 top、center 和 bottom， 水 平 对 齐 值 包括 left、center 和 right， 如 表 10-3 所 示 。 


表 10-3” background-position 属性 值 


| length | 设置 图 片 与 边 距 水 平 与 垂直 方向 的 距离 长 度 ， 后 跟 长 度 单 位 cm、mm、 
以 页 面 元 素 框 的 宽度 或 高 度 的 百分比 放置 图 片 


| tp | 背景 图 片 项 部 居中 中 | 
ISTSCTIZSE 
国内 下 多 居中 民 条 


垂直 对 齐 值 还 可 以 与 水 平 对 齐 值 一 起 使 用 ， 从 而 决定 图 片 的 垂直 位 置 和 水 平 位 置 。 


【 例 10.6】 “实例 文件 : ch10\10.6.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 背 景 位 置 设 定 </title> 

<style> 

bodyt{ 
background-image:url (xiyang.jpg); /* 设 置 背 景 图 片 */ 
background-repeat :no-repeat; /* 设 置 背景 图 片 不 重复 平 铺 */ 
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background-position:top right; /* 设 置 背景 图 片 从 顶部 和 右边 开始 显示 */ 
</style> 
</head><body></body></html> 


在 下 11.0 中 的 浏览 效果 如 图 10-7 所 示 。 网 页 中 显示 了 背景 ， 其 背景 是 从 顶部 和 右边 开始 


出 现 的 。 


图 10-7 设置 背景 位 置 
使 用 垂直 对 齐 值 和 水 平 对 齐 值 只 能 格式 化 地 放置 图 片 , 如 果 在 页 面 中 要 自由 地 定义 图 片 的 
位 置 ， 就 需要 使 用 确定 数值 或 百分比 。 此 时 需 将 上 面 代 码 中 的 语句 
background-position:top right; 
修改 为 : 
background-position:20px 30px 


在 正 11.0 中 的 浏览 效果 如 图 10-8 所 示 。 网 页 中 显示 的 背景 是 从 左上 角 开 始 出 现 的 ， 开 始 


位 置 坐标 为 (20，30) 。 


CT TE 国 ”C， 近 家 
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图 10-8 指定 背景 位 置 
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10.1.6 ”背景 图 片 大 小 

在 以 前 的 网 页 设计 中 ， 背 景 图 片 的 大 小 是 不 可 以 控制 的 ， 如 果 想 要 用 图 片 填充 整个 背景 ， 
就 需要 事先 设计 一 个 较 大 的 背景 图 片 ， 要 么 只 能 让 背景 图 片 以 平 铺 的 方式 来 填充 页 面 元 素 。 在 
CSS3 中 ， 新 增 了 一 个 background-size 属性 ， 用 来 控制 背景 图 片 大 小 ， 从 而 降低 网 页 设计 的 开 
发 成 本 。 

background-size 语法 格式 如 下 : 


background-size: [<length>|<percentage>|lauto]{1,2}|cover|lcontain 


其 参数 值 含义 如 表 10-4 所 示 。 


表 10-4 background-size 属性 参数 表 


【 例 10.7】 《实例 文件 ，ch10\10.7.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 背 景 位 置 设 定 </title> 

<style> 

body{ 
packground-image:url (xiyang.jpg); /* 设 置 背景 图 片 */ 
background-repeat :no-repeat; /* 设 置 背 景 图 片 不 重复 平 铺 */ 
background-size:cover; /* 设 置 背景 图 片 填充 了 整个 页 面 */ 

3 

</style> 

</head> 

<body> 

</body> 

</html> 


在 正 11.0 中 的 浏览 效果 如 图 10-9 所 示 ， 网 页 中 的 背景 图 片 填 充 了 整个 页 面 。 
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设 定 背景 大 小 


图 10-9 
同样 也 可 以 用 像素 或 百分比 指定 背景 大 小 显示 。 当 指定 为 百分比 时 ， 大 小 会 由 所 在 区 域 的 
宽度 、 高 度 以 及 background-origin 的 位 置 决定 ， 示 例如 下 : 
background-size:900 800; 
此 时 background-size 属性 可 以 设置 1 个 或 2 个 值 ，1 个 为 必 填 ，1 个 为 选 填 。 其 中 , 第 1 
个 值 用 于 指定 图 片 宽度 ， 第 2 个 值 用 于 指定 图 片 高 度 ， 如 果 只 设 定 一 个 值 ， 那 么 第 2 个 值 默 认 


为 auto。 
10.1.7 背景 显示 区 域 
在 网 页 设计 中 ， 如 果 能 改善 背景 图 片 的 定位 方式 , 使 设计 师 能 够 更 灵活 地 决定 背景 图 片 应 
该 显示 的 位 置 ， 就 会 大 大 减少 设计 成 本 。 在 CSS3 中 ， 新 增 了 一 个 background-origin 属性 ， 用 
来 完成 背景 图 片 的 定位 。 
默认 情况 下 ，background-position 属性 总 是 以 元 素 左上 角 原 点 作为 背景 图 像 定位 ， 而 
background-origin 属性 可 以 改变 这 种 定位 方式 。 


background-origin: border1lpaddinglcontent 


其 参数 含义 如 表 10-5 所 示 。 
表 10-5 ”background-origin 参数 值 表 


参数 值 说 明 
border 从 border 区 域 开始 显示 背景 
padding 从 padding 区 域 开 始 显示 背景 
content 从 content 区 域 开 始 显示 背景 
< 本 
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【 例 10.8】〔 实 例文 件 ，ch10\10.8.htnl) 


<!DOCTYPE html> 


<html> 

<head> 

<title> 背 景 坐标 原点 </title> 

<style> 

divt{ 
text-align:center; /* 设 置 居中 显示 */ 
height:500px; /* 设 置 div 块 的 高 度 */ 
width:416px; /* 设 置 div 块 的 宽度 */ 
border:solid lpx red; /* 设 置 div 块 的 边框 样式 */ 
padding:32px 2em 0; /* 设 置 内 边 距 的 大 小 */ 


background-image:url (15.jpg); /* 设 置 背 景 图 片 */ 
background-origin:padding; /* 设 置 从 padding 区 域 开始 显示 背景 */ 
4 
div hl{ 
font-size:18px; 
font-family:" 幼 圆 "; 
} 
div pt{ 
text-indent :2em; 
line-height:2em; 
font-family:" 楷 体 "; 
3 
</style> 
</head> 
<body> 
<div> 
<h1> 美 科学 家 发 明 时 光 斗 篷 在 时 间 中 隐瞒 事件 </h1> 
<p> 本 报 讯 据 美国 《技术 评论 》 杂 志 网 站 7 月 15 日 报道 ， 日 前 ， 康 奈 尔 大 学 的 莫 蒂 。 弗 里 德 曼 和 其 
同事 在 前 人 研究 的 基础 上 ， 设 计 并 制造 出 了 一 种 能 在 时 间 中 隐瞒 事件 的 时 光 斗 篷 。 相 关 论 文 发 表 在 国际 
著名 学 术 网 站 arXiv.org 上 。</p> 
<p> 近 年 来 有 关 隐 身 斗篷 的 研究 不 断 取 得 突破 ， 其 原理 是 通过 特殊 的 材料 使 途经 的 光线 发 生 扭曲 ， 
从 而 让 斗篷 下 的 物体 “ 隐 于 无 形 ”。 第 一 个 隐身 斗篷 只 在 微波 中 才 有 效果 ， 但 短 短 几 年 ， 物 理学 家 已 经 
发 明 出 了 能 用 于 可 见 光 的 隐身 斗篷 ， 能 够 隐藏 声音 的 “ 隐 声 斗 笑 ” 和 能 让 一 个 物体 看 起 来 像 其 他 物体 的 
“错觉 斗篷 ”。</p> 
</div> 
</body> 
</html> 


在 正 11.0 中 的 浏览 效果 如 图 10-10 所 示 。 背景 图 片 以 指定 大 小 于 网 页 左 侧 显示 , 在 背景 图 
片上 显示 了 相应 的 段落 信息 。 
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图 10-10 设置 背景 显示 


10.1.8 背景 图 像 裁剪 区 域 


在 CSS3 中 ， 新 增 了 一 个 background-clip 属性 ， 用 来 定义 背景 图 片 的 裁剪 区 域 。 
background-clip 属性 和 background-origin 属性 有 几 分 相似 ， 通 俗 地 说 ，background-clip 属性 用 
来 判断 背景 是 否 包 含 边框 区 域 ， 而 background-origin 属性 用 来 决定 background-position 属性 定 


位 的 参考 位 置 。 
background-clip 语法 格式 如 下 所 示 。 


background-clip: border-box|padding-box|content-box|no-clip 


其 参数 值 含义 如 表 10-6 所 示 。 


表 10-6 _ background-clip 参数 值 表 


content 


从 content 区 域 开 始 显示 背景 


no-clip 


从 边框 区 域外 裁剪 背景 


【 例 10.9】 《实例 文件 : ch10\10.9.html) 


<!DOCTYPE html> 
<html> 
<head> 
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<title> 背 景 裁剪 </title> 


<style> 

divt{ 
height:300px; /* 设 置 div 块 的 高 度 */ 
width:200px; /* 设 置 div 块 的 宽度 */ 
border:dotted 50px red; /* 设 置 边框 的 样式 */ 
padding:50px; /* 设 置 内 边 距 的 大 小 */ 


background-image:url (18.jpg); /* 设 置 背景 图 片 */ 
background-repeat :no-repeat; /* 设 置 背 景 图 片 不 重复 平 铺 */ 
background-clip:content;} /* 背景 图 片 仅 在 内 容 区 域内 显示 */ 

</style> 

</head> 

<body> 

<div> 

</div> 

</body> 

</html> 


在 正 11.0 中 的 浏览 效果 如 图 10-11 所 示 ， 背 景 图 像 仅 在 内 容 区 域内 显示 。 


omnimed ~ © mr Es 
| wom 
0 


图 10-11 以 内容 边缘 裁剪 背景 图 


10.1.9 背景 复合 属性 

在 CSS3 中 ，background 属性 依然 保持 了 一 起 的 用 法 ， 即 综合 以 上 所 有 与 背景 有 关 的 属性 
(以 background- 开 头 的 属性 ) 一 次 性 地 设 定 背景 样式 ， 格 式 如 下 : 

background: [background-color] [background-image] [background-repeat] 


[background-attachment] [background-position] 
[background-size] [background-clip] [background-origin] 


其 中 的 属性 顺序 可 以 自由 调换 并 且 可 以 选择 设 定 , 对 于 没有 设 定 的 属性 系统 会 自行 为 该 属 
性 添加 默认 值 。 例 如 ， 定 义 背 景 样式 规则 如 下 : 
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body 

{ 
background-color:black; /* 设 置 背景 颜色 */ 
background-image:url (bkl.jpg) ; /* 设 置 背 景 图 片 */ 
background-position:center; /* 设 置 背 景 图 片 居中 显示 */ 
background-repeat :repeat—x; /* 设 置 背景 图 片 水 平平 铺 */ 
background-attachment :fixed; /* 设 置 背 景 图 片 固定 在 可 见 区 域 里 */ 


background-size:900 800; /* 设 置 背 景 图 片 的 大 小 */ 
background-origin:padding; /* 设 置 从 padding 区 域 开始 显示 背景 */ 
background-clip:content; /* 从 content 开 始 剪 切 背 景 图 片 */ 


10.2 边框 


在 网 页 设计 中 ，HTML 元 素 在 网 页 中 会 占有 一 定 的 区 域 ， 例 如 <a> 标 记 、<p> 标 记 等 ， 对 
于 这 些 标记 可 以 通过 CSS3 的 width 和 height 设置 其 大 小 ， 并 通过 border 设置 其 边框 样式 。 

边框 就 是 将 元 素 内 容 及 间隙 包含 在 其 中 的 边线 ， 类 似 于 表格 的 外 边线 。 每 一 个 页 面 元 素 的 
边框 可 以 从 三 个 方面 来 描述 : 宽度 、 样 式 和 颜色 。 这 三 个 方面 决定 了 边框 所 显示 出 来 的 外 观 。 
CSS3 中 分 别 使 用 border-style、border-width 和 border-color 这 三 个 属性 设 定 边框 的 三 个 方面 。 
10.2.1 边框 样式 

在 进行 网 页 排版 时 ， 有 时 需要 指定 某 个 区 域 的 元 素 ， 并 将 这 些 元 素 与 其 他 元 素 区 别 开 来 ， 
这 时 可 以 让 HTML 元 素 带 有 边框 并 设置 HTML 边框 样式 。 在 第 6 章 中 ， 我 们 简单 学 习 了 给 
像 设置 边框 ， 同 样 也 可 以 给 其 他 HTML 元 素 设置 边框 。 

border-style 属性 用 于 设 定 边框 的 样式 ， 也 就 是 风格 。 设 定 边框 格式 是 边框 最 重要 的 部 分 ， 
它 主要 用 于 为 页 面 元 素 添加 边框 。 其 语法 格式 如 下 所 示 。 


border-style:none|lhidden|ldotted|ldashed|solidldoublelgroovelridge|inset| 
outset 


CSS3 设 定 了 9 种 边框 样式 ， 如 表 10-7 所 示 。 
表 10-7 边框 样式 属性 值 


属性 值 描述 
none 无 边框 ， 无 论 边框 宽度 设 为 多 大 
dotted 点 线 式 边框 


dashed 破 折 线 式 边框 


solid 直线 式 边框 


201 
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( 续 表 ) 
属性 值 描述 
double 双 线 式 边框 
groove 模 线 式 边 杠 
Tidge 痛 线 式 边 杠 
inset 内 内 效果 的 边框 
outset 突起 效果 的 边框 


【 例 10.10】“〔 实 例文 件 : ch10\10.10.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 边 框 设 置 </title> 

<style> 

hl{ 
border-style:dotted; /* 点 线 式 边框 */ 
color: black; /* 设 置 标题 颜色 */ 
text-align:center; /* 设 置 标题 居中 显示 */ 

} 

pt 
border-style:double; /* 双 线 式 边框 */ 
text-indent :2em; /* 设 置 文本 缩 进 */ 

} 

</style> 

</head> 

<body> 

<h1> 带 有 边框 的 标题 </h1> 

<p> 带 有 边框 的 段落 </p> 

</body> 

</html> 


在 下 11.0 中 的 浏览 效果 如 图 10-12 所 示 。 在 网 页 中 ， 标 题 hl 显示 的 时 候 带 有 边框 ， 其 边 
框 样式 为 点 线 式 边框 ;同样 段落 也 带 有 边框 ， 其 边框 样式 为 双 线 式 边框。 


在 没有 设 定 边框 颜色 的 情况 下 ，groove、ridge、inset 和 outset 边框 默认 的 颜色 是 灰 
ES 色 ; dotted、dashed、solid 和 double 这 四 种 边框 的 颜色 基于 页 面 元 素 的 color 值 。 
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图 10-12 设置 边框 
其 实 ， 这 几 种 边框 样式 还 可 以 分 别 定义 在 一 个 边框 中 ， 从 上 边框 开始 按照 顺 时 针 的 方向 分 
别 定义 边框 的 上 、 右 、 下 、 左 边框 样式 ， 从 而 形成 多 样式 边框 。 例 如 ， 有 下 面 一 条 样式 规则 : 
p{border-style:dotted solid dashed groove} 
另外 ， 如 果 需 要 单独 定义 边框 的 一 条 边 的 样式 ， 就 可 以 使 用 如 表 10-8 所 列 的 属性 来 定义 。 
表 10-8 边 样式 定义 属性 
I | | 


10.2.2 ”边框 颜色 

在 网 页 设计 中 ,设计 者 不 但 可 以 设置 边框 样式 , 还 可 以 设置 边框 颜色 ， 从 而 增强 边框 的 效 
果 。border-color 属性 用 于 设 定 边框 颜色 ,如果 不 想 与 页 面 元 素 的 颜色 相同 ,就 可 以 使 用 该 属性 
为 边框 定义 其 他 颜色 。 

border-color 属性 语法 格式 如 下 所 示 。 


border-color:color 


color 表示 指定 颜色 ， 其 颜色 值 通过 十 六 进 制 或 RGB 等 方式 获取 。 
同 边框 样式 属性 一 样 ，border-color 属性 可 以 为 边框 设 定 一 种 颜色 ， 也 可 以 同时 设 定 四 个 
边 的 颜色 。 


【 例 10.11】〔 实 例文 件 ， ch10\10.11.html) 
<!DOCTYPE html> 
<html> 
<head> 
<title> 边 框 颜 色 设置 </title> 
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<style> 

Pi 
border-style:double; 
border-color:red; 
text-indent:2em; 

1 

</style> 

</head> 

<body> 

<p> 边 框 颜色 设置 </p> 

<p style="border-style:solid; border-color:red blue yellow green"> 

分 别 定义 边框 颜色 </p> 

</body> 

</html> 


在 正 11.0 中 的 浏览 效果 如 图 10-13 所 示 。 在 网 页 中 ,第 一 个 段落 边框 颜色 设置 为 红色 , 第 
二 个 段落 边框 颜色 分 别 设置 为 红 、 蓝 、 黄 和 绿 。 


i 口 x 
人 着 ”D:\ 本 书 源 代码 \code 刘 图 ~ 必 搜索 
后 边框 颜色 设置 x 加 
兽 宫 百 医 一 下 ， 你 8 知道 


图 10-13 设置 边框 颜色 
除了 上 面 设置 四 个 边框 颜色 的 方法 之 外 ， 还 可 以 使 用 表 10-9 列 出 的 属性 单独 为 相应 的 边 
表 10-9 相应 的 边框 颜色 设 定 属性 


border-right-color 设 定 右边 框 颜色 
border-bottom-color 设 定 下 边框 颜色 | 
border-left-color 设 定 左边 框 颜色 | 


10.2.3 ”边框 线 宽 
在 CSS3 中 ， 可 以 通过 设 定 边框 宽带 来 增强 边框 效果 。border-width 属性 可 以 用 来 设 定 边 
框 宽度 ， 其 语法 格式 如 下 : 
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如 表 


border-width:medium|thin|lthick|length 


其 中 预 设 有 三 种 属性 值 : medium、thin 和 thick。 另 外 ， 还 可 以 自行 设置 宽度 (width) ， 


10-10 所 示 。 


表 10-10 ”边框 线 宽 属性 值 


medium 默认 值 ， 中 等 宽度 


| thin 比 medium 细 
| thick 比 medium 粗 
| length 自 定义 宽度 


【 例 10.12】〔 实 例文 件 ， ch10\10.12.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 边 框 宽度 设置 </title> 

</head> 

<body> 
<p style="border-style:dotted; border-width:medium; "> 边框 宽度 设置 </p> 
<p style="border-style:dashed;border-width:thin;"> 边 框 宽度 设置 </p> 
<p style="border-style:solid; border-width:12px;"> 分 别 定 义 边框 宽度 </p> 

</body> 

</html> 


在 IE 11.0 中 的 浏览 效果 如 图 10-14 所 示 ， 三 个 段落 边框 以 不 同 的 粗细 显示 。 


- OO x 
丫 ”D:\ 本 书 源 代码 \code 计 图 ”搜索 .… 

局 边框 完 度 设置 

诸 各 百度 一 下 ， 你 就 知道 


图 10-14 设置 边框 宽度 


m 


border-width 属性 其 实 是 border-top-width 、 border-right-width 、 border-bottom-width 和 


border-left-width 这 四 个 属性 的 综合 属性 ,分别 用 于 设 定 上 边框 、 右 边框 、 下 边框 、 左 边框 的 宽度 。 


精通 HTML54CS53+JavaScript 网 页 设计 〈 视 频 教学 版 ) (第 2 版 ) 


【 例 10.13】 实例 文件 :ch10\10.13.html) 
<!DOCTYPE html> 
<html> 
<head> 
<title> 边 框 宽度 设置 </title> 
<style> 
Pi 
border-style:solid; /* 直 线 式 边框 */ 
border-color:#ff00ee; /* 设 置 边框 的 颜色 */ 
border-top-width:medium; /* 定 义 中 等 的 上 边框 */ 
border-right-width:thin; /* 定 义 细 的 右边 框 */ 
bottom-width:thick; /* 定 义 粗 的 下 边框 */ 
border-left-width:15px; /* 定 义 左边 框 的 粗细 */ 
</style> 
</head> 
<body> 
<p> 边 框 宽度 设置 </p> 
</body> 
</html> 


在 正 11.0 中 的 浏览 效果 如 图 10-15 所 示 ， 段 落 的 四 个 边框 以 不 同 的 宽度 显示 。 


-= 口 x 
着 ”D:\ 本 书 源 代码 \code 刘 图 ”人 搜索 .… 
总 边框 完 度 设置 x 号 
竟 各 百度 一 下 ， 你 就 知道 


边框 宽度 设置 


图 10-15 分 别 设置 四 个 边框 宽度 


10.2.4 边框 复合 属性 


border 属性 集合 了 上 述 所 介绍 的 三 种 属性 ， 为 页 面 元 素 设 定 边框 的 宽度 、 样 式 和 颜色 。 语 
法 格式 如 下 所 示 。 

border:border-width border-style border-color 

其 中 ， 三 个 属性 顺序 可 以 自由 调换 。 

【 例 10.14】〔 实 例文 件 ， ch10\10.14.html) 


<!DOCTYPE html> 
<html> 
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<head> 

<title> 边 框 复合 属性 设置 </title> 

</head> 

<body> 

<p style="border:dashed red 12px"> 边 框 复合 属性 设置 </p> 
</body> 

</html> 


在 正 11.0 中 的 浏览 效果 如 图 10-16 所 示 ， 段落 边框 样式 以 破 折线 显示 、 颜 色 为 红色 、 宽 度 
为 12px。 


和 ”DAN 书 慰 KMcode 中 国 ”所 | 搜索 Pp- 
合 边 丰 所 合 层 性 设 于 x 加 
斋 全 百度 下, 你 oti 阁 


办 加 [| 


9 
[| 


图 10-16 边框 复合 属性 设置 


10.3 ” 圆 角 边框 


在 CSS3 标准 没有 指定 之 前 ， 如 果 想 要 实现 圆 角 效果 ， 需 要 花费 很 多 时 间 。 一 方面 需要 照 
顾 大 多 数 的 低 版 本 正 用 户 ， 一 方面 还 需要 兼容 各 种 浏览 器 的 私有 属性 。 在 CSS3 标准 推出 后 ， 
网 页 设计 者 可 以 使 用 border-radius 轻松 实现 圆 角 效果 。 


10.3.1 圆 角 边框 属性 


在 CSS3 中 ， 可 以 使 用 border-radius 属性 定义 边框 的 圆 角 效 果 ， 从 而 大 大 降低 了 圆 角 开发 
成 本 。border-radius 的 语法 格式 如 下 所 示 。 


border-radius: nonel<length>{1,4} [/<length>{1,4}]? 


其 中 ，none 为 默认 值 ， 表 示 元 素 没有 圆 角 。<length> 表 示 由 浮 点 数字 和 单位 标识 符 组 成 的 
长 度 值 ， 不 可 为 负 值 。 


【 例 10.15】 《实例 文件 : chl0\10.15.html) 
<!DOCTYPE html> 

<html> 

<head> 

<title> 圆 角 边 框 设置 </title> 

<style> 

p{text-align:center; 
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border:15px solid red; /+* 设 置 边框 的 样式 */ 
width:100px; 
height:50px; 
border-radius:10px; /* 设 置 圆 角 边框 的 半径 */ 
于 
</style> 
</head> 
<body> 
<p> 这 是 一 个 圆 角 边框 </p> 
</body> 
</html> 


在 正 11.0 中 的 浏览 效果 如 图 10-17 所 示 ， 段 落 边框 显示 时 以 圆 角 显示 ， 其 半径 为 10px。 


- 0O x 
站 ”D:\ 本 书 源 代码 \code 刘 圈 ~ 搜索 ... 
筷 国 角 边框 设置 x 加 
竟 当 百 度 一 下 ， 你 就 知道 


边框 


图 10-17 定义 圆 角 边框 


10.3.2 指定 两 个 圆 角 半径 


可 以 使 用 borderradius 属性 设置 一 个 参数 来 绘制 圆 角 , 同样 还 可 以 使 用 两 个 参数 绘制 圆 角 。 
border-radius 属性 可 以 包含 两 个 参数 值 : 第 一 个 参数 表示 圆 角 的 水 平 半 径 ， 第 二 个 参数 表示 圆 
角 的 垂直 半径 ， 两 个 参数 通过 斜 线 (“/”) 隔 开 。 如 果 仅 含 一 个 参数 值 ， 那 么 第 二 个 值 与 第 一 
个 值 相 同 ， 表 示 这 个 角 就 是 一 个 1/4 的 圆 。 如 果 参 数值 中 包含 0， 那 么 这 个 值 就 是 矩形 ， 不 会 
显示 为 圆 角 。 


【 例 10.16】 “实例 文件 : ch10\10.16.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 圆 角 边 框 设置 </title> 

<style> 

DL 
text-align:center; 
border:15px solid red;  ”/* 设 置 边框 的 样式 */ 
width:100px; 
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height:50px; 
border-radius:5px/50px; /* 增 加 圆 角 边框 */ 
} 
-p24 
text-align:center; 
border:15px solid red;  /* 设 置 边框 的 样式 */ 
width:100px; 
height:50px; 
border-radius:50px/5px; /* 增 加 圆 角 边框 */ 
1 
</style> 
</head> 
<body> 
<p class=p1> 这 是 一 个 圆 角 边框 R</P> 
<p class=p2> 这 是 一 个 圆 角 边框 B</P> 
</body> 
</html> 


在 正 11.0 中 的 浏览 效果 如 图 10-18 所 示 。 网 页 中 显示 了 两 个 圆 角 边框 , 第 一 个 段落 圆 角 半 
径 为 5px/50px， 第 二 个 段落 圆 角 半径 为 50px/5px。 


es 口 x 
| 可 Di 林 书 至 fodeV 国 ” 避 | 搜索 
| 号 可 Ri 省 3 
高 ER- 下, 人 rE 


图 10-18 定义 不 同 半径 圆 角 边框 


10.3.3 ”绘制 四 个 不 同 圆 角 边框 

有 时 为 了 网 页 需要 , 可 以 为 圆 角 边 框 设 置 不 同 半径 的 圆 角 , 其 样式 就 会 更 加 漂亮 。 在 CSS3 
中 ， 实 现 四 个 不 同 圆 角 边 框 ， 其 方法 有 两 种 : 一 种 是 border-radius 属性 ， 另 一 种 是 使 用 
border-radius 衍生 属性 。 


1. border-radius 属性 

第 一 种 方法 就 是 利用 border-radius 属性 为 其 赋 一 组 值 。 当 为 border-radius 属性 赋 一 组 值 时 
将 遵循 CSS 规则 ， 可 以 包含 2 到 4 个 属性 值 ， 此 时 无 法 使 用 斜 杠 定 义 圆 角 水 平和 垂直 半径 。 

如 果 直 接 给 border-radius 属性 赋 4 个 值 ， 这 4 个 值 将 按照 top-left、top-right、bottom-right、 
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bottom-left 的 顺序 来 设置 。 如 果 bottom-left 值 省 略 ， 其 圆 角 效果 和 top-right 效果 相同 ， 如 果 
bottom-right 值 省 略 ， 其 圆 角 效果 和 top-left 效果 相同 ; 如 果 top-right 的 值 省 略 ， 其 圆 角 效果 和 
top-left 效果 相同 。 如 果 为 border-radius 属性 设置 4 个 值 的 集合 参数 ， 则 每 个 值 表 示 每 个 角 的 圆 
角 半 径 。 


【 例 10.17】 《实例 文件 : chl0\10.17.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 圆 角 边框 设置 </title> 
<style> 
.divil{ 
border:15px solid blue; 
height:100px; 
border-radius:10px 30px 50px 70px; 
} 
.div21{ 
border:15px solid blue; 
height:100px; 
border-radius:10px 50px 70px; 
) 
.div31{ 
border:15px solid blue; 
height:100px; 
border-radius:10px 50px; 
} 
</style> 
</head> 
<body> 
<div class=divl></div><br /> 
<div class=div2></div><br /> 
<div class=div3></div> 
</body> 
</html> 


在 正 11.0 中 的 浏览 效果 如 图 10-19 示 ， 第 一 个 div 层 设置 了 四 个 不 同 的 圆 角 边框 ,第 二 个 
div 层 设置 了 三 个 不 同 的 圆 角 边框 ， 第 三 个 div 层 设置 了 两 个 不 同 的 圆 角 边框 。 


Dreamreimeodeg ~ O mR D- 二 
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图 10-19 ”设置 四 个 圆 角 边框 


CSS3 美化 背景 与 边框 第 10 和 剂 


2. border-radius 衍生 属性 
除了 上 面 设置 圆 角 边框 的 方法 之 外 ， 还 可 以 使 用 表 10-11 列 出 的 属性 单独 为 相应 的 边框 设 
置 圆 角 。 


表 10-11 border-radius 衍生 属性 


属性 描述 


border-top-right-radius 定义 右上 角 圆 角 
border-bottom-right-radius 定义 右 下 角 圆 角 
border-bottom-left-radius 定义 左下 角 圆 角 
border-top-left-radius 定义 左上 角 圆 角 


【 例 10.18】〔 实 例文 件 : ch10\10.18.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 圆 角 边 框 设置 </title> 

<style> 

.divt{ 
border:15px solid blue; 
height:100px; 
border-top-left-radius:70px; 
border-bottom-right-radius:40px; 

</style> 

</head> 

<body> 

<div class=div></div><br /> 

</body> 

</html> 


在 正 11.0 中 的 浏览 效果 如 图 10-20 所 示 ， 网 页 中 设置 的 两 个 圆 角 边框 分 别 使 用 
border-top-left-radius 和 border-bottom-right-radius 指定 。 
豆 ”D: 本 书 源 人 权 code 肖 国 ~ 节 搜索- 


后 国生 边 本 没 生 . 
需 各 百度 一 下 ， 你 x 六 


图 10-20 绘制 指定 贺 角 边框 
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10.3.4 ”绘制 边框 种 类 


border-radius 属性 可 以 根据 不 同 半 径 值 来 绘制 不 同 的 圆 角 边框 。 同 样 也 可 以 利用 
border-radius 来 定义 边框 内 部 的 圆 角 ， 即 内 圆 角 。 需 要 注意 的 是 ， 外 部 圆 角 边 框 的 半径 称 为 外 
半径 ， 内 边 半 径 等 于 外 边 半径 减 去 对 应 边 的 宽度 ， 即 将 边框 内 部 的 圆 的 半径 称 为 内 半径 。 

通过 外 半径 和 边框 宽度 的 不 同 设置 ， 可 以 绘制 出 不 同形 状 的 内 边框 ， 例 如 绘制 内 直角 、 小 
内 圆 角 、 大 内 圆 角 和 圆 。 


【 例 10.19】 《实例 文件 : chl0\10.19.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 圆 角 边框 设置 </title> 
<style> 
.divlt{ 
border:70px solid blue; 
height:50px; 
border-radius:40px;} 
.div21{ 
border:30px solid blue; 
height:50px; 
border-radius:40px;} 
.div31{ 
border:10px solid blue; 
height:50px; 
border-radius:60px;} 
.div41{ 
border:1px solid blue; 
height:100px; 
width:100px; 
border-radius:50px;} 
</style> 
</head> 
<body> 


<div class=divl></div><br 
<div class=div2></div><br 
<div class=div3></div><br 
<div class=div4></div><br 
</body> 
</html> 


/> 
Vv 
es 
/> 


在 正 11.0 中 的 浏览 效果 如 图 10-21 所 示 , 第 一 个 边框 内 角 为 直角 , 第 二 个 边框 内 角 为 小 
角 ， 第 三 个 边框 内 角 为 大 圆 角 ， 第 四 个 边框 为 圆 。 
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图 10-21 绘制 不 同 种 类 边框 


当 边 框 宽度 设置 大 于 圆 角 外 半径 ， 即 内 半径 为 0， 则 会 显示 内 直角 ， 而 不 是 圆 直 角 ， 所 以 
内 外 边 曲线 的 圆心 必然 是 一 致 的 〈 见 上 例 中 第 一 种 边框 设置 ) 。 如 果 边 框 宽度 小 于 圆 角 半 径 ， 
即 内 半径 小 于 0， 则 会 显示 小 幅 圆 角 效果 〈 见 上 例 中 第 二 个 边框 设置 )》。 如 果 边 框 宽 度 设 置 远 
远 小 于 圆 角 半径 ， 即 内 半径 远 远 大 于 0， 则 会 显示 大 幅 圆 角 效果 〈 见 上 例 中 第 三 者 边框 设置 ) 。 
如 果 设 置 元 素 相 同 ， 同 时 设置 圆 角 半径 为 元 素 大 小 的 一 半 ， 则 会 显示 圆 〈 见 上 例 中 的 第 四 个 边 
框 设置 ) 。 


10.4 ”图 片 边框 


在 CSS3 中 ,为 了 增强 边框 效果 ,特意 新 增 了 一 个 属性 border-image， 用 来 控制 边框 图 片 。 
实际 上 该 属性 和 background-image 属性 功能 相似 ， 只 不 过 它 的 功能 更 强大 一 些 。 


10.4.1 ”图片 边框 属性 


border-image 是 CSS3 新 增 核心 属性 之 一 ， 也 是 一 个 非常 实用 的 属性 ， 它 可 以 设置 border 
边框 的 背景 图 。 可 惜 的 是 ， 目 前 浏览 器 对 其 支持 不 是 太 好 。 例 如 ，Webkit 引擎 支持 
-webkit-border-image 私有 属性 、Mozilla Gecko 引擎 支持 -moz0-borer-image 私有 属性 、Presto 引 
擎 支持 -o-border-image 私有 属性 。 

border-image 语法 格式 如 下 所 示 。 


border-image: nonel<image> [ <number>|<percentage>] {1,4} 
[/<border-width>{1,4}]? [stretchl|repeat|round] {0,2} 


其 参数 含义 如 表 10-12 所 示 。 
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表 10-12 ”图 片 边框 属性 参数 


参数 说 明 

none 默认 值 ， 无 背景 图 

<image> 使 用 绝对 或 相对 url 地 址 指定 背景 图 像 

<number> 边框 宽度 或 者 边框 背景 图 像 大 小 ， 使 用 固定 像素 值 表示 
<percentage> 设置 边框 背景 图 像 大 小 ， 即 边框 宽度 ， 用 百分比 表示 
[ stretch | repeat | round ] 拉 伸 | 重复 | 平 铺 (其 中 stretch 是 默认 值 ) 


为 了 方便 设计 师 更 灵活 地 定义 边框 的 背景 图 像 ，CSS3 人 允许 将 border-image 属性 派生 出 众 
多 的 子 属 性 ， 一 方面 CSS3 将 border-image 分 成 了 8 部 分 ， 使 用 8 个 子 属性 分 别 定义 特定 方位 
上 边框 的 背景 图 像 ， 具 体 属性 如 表 10-13 所 示 。 


表 10-13 border-image 派生 属性 


派生 属性 说 明 

border-top-image 定义 顶部 边框 背景 图 像 
border-right-image 定义 右 侧 边框 图 像 
border-bottom-image 定义 底部 边框 图 像 
border-left-image 定义 左 侧 边框 图 像 
border-top-left-image 定义 左上 角 边 框图 像 
border-top-right-image 定义 右上 角 边 框图 像 
border-bottom-left-image 定义 左下 角 边 框图 像 
border-bottom-right-image 定义 右 下 角 边 框图 像 


另 一 方面 ，border-image 还 派生 了 表 10-14 所 示 的 几 个 属性 。 
表 10-14 ”border-image 派生 属性 
说 明 
定义 边框 的 背景 图 像 源 ， 即 图 像 URL 
定义 如 何 裁 切 背景 图 像 ， 与 背景 图 像 的 定位 功能 不 同 
定义 边框 背景 图 像 的 重复 性 
定义 边框 背景 图 像 的 现实 大 小 ， 虽 然 W3C 定义 了 该 属性 ， 但 浏览 器 
还 是 习惯 使 用 border-width 实现 相同 的 功能 
定义 边框 背景 图 像 的 偏 移 位 置 


border-image-source 


border-image-slice 


border-image-repeat 


border-image-width 


border-image-outset 
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10.4.2 设置 图 像 边框 显示 方式 


border-image 是 一 个 复合 属性 ， 包 含 图 像 源 、 剪 裁 位 置 和 重复 性 。 例 如 ，border-image:url 
(1.jp8) 50 no-repeat 样式 就 表示 边框 背景 图 像 为 1jpg， 剪 裁 位 置 为 50 像素 ， 禁 止 重 复 。 
border-image 属性 使 用 urlO 调 用 背景 图 像 ， 可 以 是 相对 路 径 或 者 绝对 路 径 ， 还 可 以 不 使 用 图 像 ， 
即 border-image:none。 

border-image 属性 最 让 人 迷惑 的 地 方 就 是 第 二 个 参数 值 “ 前 裁 位 置 ” 即 border-image-slice。 
border-image-slice 用 法 比较 特殊 ， 没 有 单位 ， 默 认 单 位 为 像素 ; 支持 百分比 值 ， 百 分 比值 是 相 
对 于 边框 图 像 而 言 的 。 例 如 ， 边 框图 像 大 小 为 400pxX300px， 当 border-image-slice 属性 值 为 
20% 时 ， 实 际 的 效果 就 是 剪裁 了 图 像 60px、80px、60px、80px 的 四 边 大 小 ， 即 使 用 20% 乘 于 
图 像 400pxX300px 的 每 条 边 ， 然 后 获取 原来 图 像 一 定 比例 的 图 像 。 如 果 border-image-slice 使 
用 的 是 数值 ， 就 表示 按 数 值 大 小 对 原 图 像 进行 裁剪。 

当 使 用 border-image-slice 图 像 将 图 片 按 百 分 比 或 者 数值 进行 裁剪 后 , 就 会 获取 一 定数 量 的 
图 像 ， 然 后 将 这 些 图 像 重 新 安置 到 边框 背景 上 ， 这 时 图 像 非常 容易 发 生变 形 。 这 个 与 CSS 中 
clip 属性 非常 相似 。border-image-slice 属性 值 标准 包含 4 个 参数 ,遵循 CSS 方位 规则 ， 按 照 上 、 
右 、 下 、 左 的 顺 时 针 方向 赋值 剪裁 。 

使 用 示例 如 下 所 示 。 


border-image:url(images/a.jpg) 0 12 0 12 stretch stretch 


上 述 代码 中 ，url 表示 获取 图 片 ，“0 12 0 12” 表 示 按 顺 时 针 设置 边框 宽度 ， 即 裁剪 图 像 ， 
也 可 以 简写 为 “0 12”， 第 一 个 “stretch ”表示 在 水 平方 向 上 延伸 ， 第 二 个 “stretch” 表 示 在 垂 
直方 向 上 延伸 。 


【 例 10.20】 (实例 文件 : chl0\10.20.html) 
<!DOCTYPE html> 

<html> 

<head> 

<style> 

div 

{ 

border:15px solid transparent; 
width:300px; 

padding:10px 20px;} 


#round 

{ 

-moz-border-image:url(1.png) 30 30 roundg; /二 IOLG Firefox */ 
-webkit-border-image:url(1.png) 30 30 round; /* Safari and Chrome */ 
-o-border-image:url(1.png) 30 30 round; /* Opera */ 


border-image:url(1.png) 30 30 round;} 
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#stretch 

{ 

-moz-border-image:url(1.png) 30 30 stretch; /* Old Firefox */ 
-Webkit-border-image:url(1.png) 30 30 stretch; /* Safari and Chrome */ 
-o-border-image:url(1.png) 30 30 stretch; /* Opera */ 
border-image:ur1l(1.png) 30 30 stretch;} 

</style> 

</head> 

<body> 


<p> 使 用 的 原始 图 片 如 下 : </p> 

<img src="1.png"> 

<p>border-image 属性 规定 了 边框 的 图 片 。</p> 
<div id="round"> 图 片 铺 满 整个 边框 。</div> 


< /> 

<div id="stretch"> 图 片 被 拉 伸 以 填充 该 区 域 。</div> 
</body> 

</html> 


在 正 11.0 中 的 浏览 效果 如 图 10-22 所 示 。 


| 和 DD:\ 水 书 源 代 码 Ycode 六 图 ”人 搜 索 A- 
入 DA 本 书 源 KBvcode 天 fx | 
请 内 百 座 一 下 ， 作 0 


使 用 的 


片 如 下 : 


border-image 局 性 规定 了 边框 的 图 片 . 


: 图 片 铺 满 整个 边框 。 i 
图 片 a Sd 


图 10-22 边框 背景 显示 


此 时 设置 下 面 的 语句 : 

#round 

{ 

-moz-border-image:url(1.png) 81; /* Old Firefox */ 
-webkit-border-image:url(1.png) 81; /* Safari and Chrome */ 
-o-border-image:url(1.png) 81; /* Operal */ 


border-image:url(1.png) 81;} 


在 下 11.0 中 的 浏览 效果 如 图 10-23 所 示 。 可 以 看 到 上 面 的 图 片 没 有 被 切割 , 并 分 成 四 份 在 
四 角 显 示 。 
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使 用 的 原始 图 片 如 下 : 


XX 


border-image 属性 规定 了 边框 的 图 片 。 


入 党 
图 片 铺 满 整 个 边框 。 


人 
图 片 被 拉 伸 以 填充 该 区 域 。 
i 一 


图 10-23 切割 大 小 大 于 图 片 大 小 


10.5 ”综合 实例 一 一 设计 公司 主页 
打开 各 种 类 型 商业 网 站 ， 最 先 映 入 眼帘 的 就 是 首页 ， 也 称 为 主页 。 作 为 一 个 网 站 的 门户 ， 
主页 一 般 要 求 版 面 整洁 ， 美 观 大 方 。 结 合 前 面 学 习 的 背景 和 边框 知识 ， 我 们 创建 一 个 简单 的 商 
业 网 站 。 具 体 步 又 如 下 
分析 需 求 。 


在 本 实例 中 ， 主 页 包括 了 三 个 部 分 ， 一 部 分 是 网 站 logo， 一 部 分 是 导航 栏 ， 最 后 一 部 分 是 
主页 显示 内 容 。 网 站 logo 使 用 一 个 背景 图 来 代替 ， 导 航 栏 使 用 表格 实现 ， 内 容 列表 使 用 无 序列 
表 实 现 。 


li 到 构建 基本 HIML。 


为 了 划分 不 同 的 区 域 , HTML 页 面 需 要 包含 不 同 的 div 层 , 每 一 层 代 表 一 个 内 容 。 一 个 div 
包含 背景 图 ， 一 个 div 包含 导航 栏 ， 一 个 div 包含 整体 内 容 ， 内 容 又 可 以 划分 两 个 不 同 的 层 。 
基本 HIML 代码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 
<title> 公 司 主页 </title> 
</head> 
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<body> 

<center> 

<div> 

<div class="divl" align=center></div> 
<div class=div2> 


<table width=99%><tr align=center><td> 首 页 </td><td> 最 新 消息 </td><td> 产 品 展 
示 </td><td> 销 售 网 络 </td><td> 人 才 招 聘 </td><td> 客 户 服务 </td></tr></table> 


</div> 

<div class=div3> 
<div class=div4> 
<ul> 最 新 消息 

<1i> 公 司 举办 2019 金 秋 篮 球 比 赛 </1i> 
<1i> 消 防 演练 大 比武 </1i> 
<1i> 优 秀 员工 评比 </1i> 
<1i> 公 司 发 布 招聘 信息 </1i> 
</ul> 

</div> 

<div class=div5> 
<ul> 客 户 案例 

<1i> 上 海 电 力 公司 </1i> 
<1i> 浙 江 电力 公司 </1i> 
<1i> 辽 宁 电力 公司 </1i> 
<1i> 河 北 电力 公司 </1i> 
</ul> 

</div> 

</div> 

</div> 

</center> 

</body> 

</html> 


在 正 11.0 中 的 浏览 效果 如 图 10-24 所 示 ， 在 网 页 中 显示 导航 栏 和 两 个 列表 信息 。 


上 @3) 添加 CSS 代码， 设置 背景 logo。 


<style> 

be 
height:100px; 
width:820px; 
background-image:url (main.jpg); 
background-repeat :no-repeat; 
background-position:center; 
background-size:cover;} 

</style> 


在 正 11.0 中 的 浏览 效果 如 图 10-25 所 示 。 在 网 页 顶部 显示 了 一 个 背 
div 层 ， 并 不 重复 ， 并 且 背 景 图 片 居中 显示 。 


池 
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pe 容 作 球 比 守 首页 ”最 新 消息 。 产品 展示 。 稍 传 网 络 。 人 才 招聘 
pe 公司 于 t 已: 
本 消防 演练 大 比武 
入 优秀 员工 评比 
公司 发 布 招聘 信息 
客户 案例 
则 上 海 电力 公司 
浙江 电力 公司 为 全 
; 生 秆 电站 公司 河北 电力 公司 
< 全 
图 10-24 基本 HTML 结构 图 10-25 设置 背景 图 


L 罗 添加 CSS 代码 ， 设 置 导 航 栏 。 


.div21{ 
width:820px; 
background-color:#d2e7ff; 


} 
tablef{ 
font-size:20px; 
font-family:" 幼 圆 "; 
} 


在 正 11.0 中 的 浏览 效果 如 图 10-26 所 示 。 在 网 页 中 ， 导 航 栏 背景 色 为 浅 蓝 色 ， 表 格 中 字 
体 大 小 为 20px， 字 体 类 型 是 幼 圆 。 


加 名 添加 CSS 代码 ， 设 置 内 容 样式 。 


.div3{ 
width:820px; 
height:320px; 
border-style:solid; 
border-color:#ffeedd; 
border-width:10px; 
border-radius:60px; 


.div4{ 
width:810px; 
height:150px; 


text-align:left; 
border-bottom-width: 2px; 
border-bottom-style:dotted; 
border-bottom-color:#ffeedd; 
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} 

.div5{ 
width:810px; 
height:150px; 
text-align:left; 

} 


在 正 11.0 中 的 浏览 效果 如 图 10-27 所 示 。 在 网 页 中 ， 内 容 显 示 在 一 个 圆 角 边框 中 ,两 个 不 
同 的 内 容 块 中 间 使 用 虚线 隔 开 。 


ox ee 
避 DVRHRREodey 国 -加 | 人- pr] | ome me CRC Be @ 
元 一 5 
人 x | HN) SS) ED) FA 工商 el 
fF)】 入 二 生 太 V】 szA| 工 Rn 才 00 rp 
译 Em_ 下 ,nepue 
- = 要 全 和 这 入 
羽 1 得 可 到 + di 
闫 1 站 9 
过 河 


闪 地 白 消 息 产品 有 下 全 全 人 党、 人才 折 黎 客户 服务 
首页 最 新 消息 产品 展示 销售 网 络 te 


谍 表 员工 
公司 


最 新 消息 
公司 举办 2019 侈 次 族 球 比赛 
消防 演练 大 比武 
优秀 员工 评比 
公司 发 布 招聘 信 息 


区 户 要 朵 
上 


图 10-26 设置 导航 栏 图 10-27 CSS 修饰 边框 


gj 添加 CSS 代码 ， 设 置 列表 样式 。 
ul{ 
font-size:20px; 
font-family:" 楷 体 "; 
. 


在 下 11.0 中 的 浏览 效果 如 图 10-28 所 示 。 在 网 页 中 ,列表 字体 大 小 为 20px， 字 形 为 楷体 。 


EEE Ea .| 


a 
首页 。 最 新 消息 。 产品 展示 。 ”前 舍 网 络 。 人才 招聘 。 客户 服务 


最新 消息 
。 公 司 单 办 2019 全 入 生计 比 于 
。 消防 演练 大 比 去 

。 优 秀 员工 诉 比 

， 公司 发 布 招聘 信息 


图 10-28 美化 列表 信息 
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10.6 专家 解 惑 


1. 背景 图 片 不 显示 ， 是 不 是 路 径 有 问题 ? 
在 一 般 情 况 下 ， 设 置 图 片 路 径 的 代码 如 下 : 
background-image:url (10go.jpg); 


background-image:url(../10g0.jpg); 
background-image:url(../images/10go.jpg); 


对 于 第 一 种 情况 “url(logo.jpg)”， 要 看 此 图 片 是 不 是 与 CSS 文件 在 同一 目录 。 

对 于 第 二 种 与 第 三 种 情况 ， 极 力 不 推 荐 使 用 ， 因 为 网 页 文件 可 能 存在 于 多 级 目录 中 ， 不同 
级 目录 的 文件 位 置 注定 了 相对 路 径 是 不 一 样 的 。 这 样 就 让 问题 复杂 化 了 ， 很 可 能 图 片 在 这 个 文 
件 中 显示 正常 ， 换 了 一 级 目录 ， 就 找 不 到 图 片 的 影子 了 。 有 一 种 方法 可 以 轻松 解决 这 一 问题 ， 
建立 一 个 公共 文件 目录 ， 用 来 存放 一 些 公 用 图 片 文件 ， 例 如 “image”， 将 图 片 文件 直接 存 于 
该 目录 中 。 在 CSS 文件 中 ， 代 码 如 下 : 

url (images/1ogo.jpg) 

2. 用 小 图 片 进行 背景 平 铺 好 吗 ? 

不 要 使 用 过 小 的 图 片 做 背景 平 铺 ， 因 为 宽 高 1px 的 图 片 平 铺 出 一 个 宽 高 200px 的 区 域 ， 需 
要 200X200=40000 次 ， 占 用 资源 。 

3. 边框 样式 border:0 会 占有 资源 吗 ? 

推荐 的 写法 是 border:none， 虽 然 border:0 只 是 定义 边框 宽度 为 零 ， 但 边框 样式 、 颜 色 还 是 
会 被 浏览 器 解析 ， 占 用 资源 。 


第 11 章 JavaScript 概述 


JavaScript 语言 作为 目前 流行 的 脚本 语言 ， 与 HIML5 更 是 密 不 可 分 。HTMLS 中 的 核心 功 
能 基本 都 需要 JavaScript 语言 的 支持 。 本 章 作为 入 门 章节 ， 主 要 为 读者 讲述 JavaScript 的 发 展 
历程 及 编写 环境 。 


11.1 JavaScript 简介 


JavaScript 作为 一 种 可 以 给 网 页 增加 交互 性 的 脚本 语言 ， 拥 有 二 十 多 年 的 发 展 历史 ， 简 单 、 
易学 易 用 特性 使 其 立 于 不 败 之 地 。 


11.1.1 ” JavaScript 是 什么 


JavaScript 最 初 由 网 景 公司 的 Brendan Eich 设计 ， 是 一 种 动态 、 弱 类 型 、 基 于 原型 的 语言 ， 
内 置 支持 类 。 经 过 二 十 多 年 的 发 展 ， 它 已 经 成 为 健壮 的 基于 对 象 和 事件 驱动 并 具有 相对 安全 性 
的 客户 端 脚本 语言 。 同 时 也 是 一 种 广泛 用 于 客户 端 Web 开发 的 脚本 语言 ， 常 用 来 给 HTML 网 
页 添加 动态 功能 ， 比 如 响应 用 户 的 各 种 操作 。 
1. JavaScript 的 特点 
(1) 语法 简单 ， 易 学 易 用 。 
JavaScript 语法 简单 、 结 构 松 散 ， 可 以 使 用 任何 一 种 文本 编辑 器 来 进行 编写 。JavaScript 程 
序 运行 时 不 需要 编译 成 二 进 制 代码 ， 只 需要 支持 JavaScript 的 浏览 器 进行 解释 。 
(2) 解释 性 语言 
非 脚本 语言 编写 的 程序 通常 需要 经 过 “编写 ”一 “编译 ”一 “链接 ”一 “运行 ”4 个 步骤 ， 
而 脚本 语言 JavaScript 只 需要 经 过 “编写 ”一 “运行 ”2 个 步骤 。 
(3) 跨 平台 
由 于 JavaScript 程序 的 运行 依赖 于 浏览 器 ， 只 要 操作 系统 中 安装 有 支持 JavaScript 的 浏览 
器 即 可 ， 因 此 JavaScript 与 平台 (操作 系统 ) 无 关 ， 如 Windows 操作 系统 、UNIX 操作 系统 、 
Linux 操作 系统 等 ， 或 者 是 用 于 手机 的 Android 操作 系统 、iPhone 操作 系统 等 。 
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(4) 基于 对 象 和 事件 驱动 

JavaScript 把 HTML 页 面 中 的 每 个 元 素 都 当 作 一 个 对 象 来 处 理 ， 并 且 这 些 对 象 都 具有 层次 
关系 ， 像 一 棵 倒立 的 树 ， 这 种 关系 被 称 为 “文档 对 象 模型 (DOM) ”。 在 编写 JavaScript 代码 
时 会 接触 到 大 量 对 象 及 对 象 的 方法 和 属性 。 可 以 说 学 习 JavaScript 的 过 程 ， 就 是 了 解 JavaScript 
对 象 及 其 方法 和 属性 的 过 程 。 因 为 基于 事件 驱动 ， 所 以 JavaScript 可 以 捕捉 到 用 户 在 浏览 器 中 
的 操作 ， 可 以 将 原来 静态 的 HTML 页 面 变 成 可 以 和 用 户 交互 的 动态 页 面 。 

(5) 用 于 客户 端 

尽管 JavaScript 分 为 服务 器 端 和 客户 端 两 种 ， 但 目前 应 用 最 多 的 还 是 客户 。 

2. JavaScript 的 作用 

JavaScript 可 以 弥补 HTML 语言 的 缺陷 , 实现 Web 页 面 客户 端的 动态 效果 ,其 主要 作用 如 
下 : 

(1) 动态 改变 网 页 内 容 

HTML 语言 是 静态 的 ， 一 旦 编写 ， 内 容 是 无 法 改变 的 。JavaScript 可 以 弥补 这 种 不 足 ， 可 
以 将 内 容 动态 地 显示 在 网 页 中 。 

(2) 动态 改变 网 页 的 外 观 

JavaScript 通过 修改 网 页 元 素 的 CSS 样式 ， 可 以 动态 地 改变 网 页 的 外 观 。 例 如 ， 修 改 文本 
的 颜色 、 大 小 等 属性 、 图 片 位 置 的 动态 改变 等 。 

(3) 验证 表单 数据 

为 了 提高 网 页 的 效率 ,用 户 在 填写 表单 时 ， 可 以 在 客户 端 对 数据 进行 合法 性 验证 ， 验 证 成 
功 之 后 才能 提交 到 服务 器 上 ， 进 而 减少 服务 器 的 负担 和 网 络 带 宽 的 压力 。 

(4) 响应 事件 

JavaScript 是 基于 事件 的 语言 ， 因 此 可 以 影响 用 户 或 浏览 器 产生 的 事件 。 只 有 事件 产生 时 
才 会 执行 某 段 JavaScript 代码 ， 如 只 有 当 用 户 单 击 计算 按钮 时 ， 程 序 才 显示 运行 结果 。 


几乎 所 有 浏览 器 都 支持 Javascript， 如 Internet Explorer (IE ) 、Firefox、Netscape、 
5 可 Mozilla、Opera 等 。 


11.1.2 ”JavaScript 和 Java 的 关系 


初次 接触 JavaScript 的 读者 ， 很 容易 对 Java 和 JavaScript 感觉 迷惑 ， 分 辨 不 清 它们 之 间 的 
关系 。JavaScript 是 由 Netscape 公司 开发 的 ， 最 初 它 的 名 字 为 LiveScript，Netscape 在 与 Sun 合 
作 之 后 才 将 其 改名 为 JavaScript， 并 且 成 为 Sun 公司 的 注册 商标 。JavaScript 与 Java 名 称 上 的 近 
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似 ， 是 当时 网 景 为 了 营销 考虑 与 Sun 公司 达成 协议 的 结果 。 
JavaScript 和 Java 除了 在 语法 方面 有 点 类 似 之 外 ， 几 乎 没有 相同 之 处 ， 并 且 由 不 同 的 公司 
开发 研制 。JavaScript 和 Java 之 间 主 要 存在 以 下 几 个 区 别 。 


Java 是 传统 的 编程 语言 ，JavaScript 是 脚本 语言 。 

Java 语言 多 用 于 服务 器 端 ，JavaScript 主要 用 于 客户 端 。 

Java 不 能 直接 嵌入 到 网 页 中 运行 ，JavaScript 程序 可 以 直接 嵌入 到 网 页 中 运行 。 
Java 和 JavaScript 语法 结构 有 差异 。 


11.1.3 JavaScript 的 发 展 历史 
1995 年 Netscape 公司 开发 的 名 字 为 LiveScript 语言 ， 与 Sun 公司 合作 之 后 ， 并 于 1996 年 
更 名 为 JavaScript， 版 本 为 1.0。 随 着 网 络 和 网 络 技术 的 不 断 发 展 ，JavaScript 的 功能 越 来 越 强 
大 并 得 以 完善 ， 至 今 经 历 了 以 下 几 个 版 本 ， 各 个 版 本 的 发 布 日 期 及 功能 如 表 11-1 所 示 。 
表 11-1 JavaScript 历史 版 本 
版 本 发 布 日 期 新 增 功 能 


10 目前 已 经 不 用 

11 修正 了 1.0 中 的 部 分 错误 ， 并 加 入 了 对 数组 的 支持 

12 加 入 了 对 switch 选择 语句 和 规则 表达 的 支持 

i 修正 了 JavaScript 1.2 与 ECMA 1.0 中 不 兼容 的 部 分 

| [加 入 了 服务 器 端 功 能 

15 在 JavaScript 1.3 的 基础 上 增加 了 异常 处 理 程序 ,并 与 ECMA 3.0 完全 兼容 


1.6 加 入 对 E4X、 字 符 串 泛 型 的 支持 以 及 新 的 数组 、 数 据 方法 等 新 特性 


Lg 2006 年 10 月 在 JavaScript 1.6 的 基础 上 加 入 了 生成 器 、 声 明 器 、 分 配 符 变化 、let 表达 
式 等 新 特性 
1.8 2008 年 6 月 更 新 很 小 ， 它 确实 包含 了 一 些 向 ECMAScript 4/JavaScript 2 进化 的 痕迹 


1.8.1 2009 年 6 月 该 版 本 只 有 很 少 的 更 新 ， 主 要 集中 在 添加 实时 编译 跟踪 上 
1.8.5 2010 年 7 月 
2.0 制定 中 


JavaScript 尽管 版 本 很 多 , 但 是 受 限 于 浏览 器 。 并 不 是 所 有 版 本 的 JavaScript 浏览 器 都 支持 ， 
常用 浏览 器 目前 对 JavaScript 版 本 的 支持 如 表 11-2 所 示 。 
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表 11-2 对 JavaScript 版 本 的 及 支持 情况 


浏览 器 对 JavaScript 的 支持 情况 | 
Internet Explorer JavaScript 1.1~ JavaScript 1.3 | 
Firefox JavaScript 1.1~ JavaScript 1.8 | 
Opera JavaScript 1.1~ JavaScript 1.5 | 


11.1.4 JavaScript 开发 及 运行 环境 


1. 开发 环境 

JavaScript 是 一 种 脚本 语言 ， 代 码 不 需要 编译 成 二 进 制 ， 而 是 以 文本 的 形式 存在 ， 因 此 任 
何 文本 编辑 器 都 可 以 作为 其 开发 环境 。 通 常 使 用 的 JavaScript 编辑 器 有 记事 本 、UltraEdit 和 
Dreamweaver。 本 书 使 用 Dreamweaver 作为 开发 工具 。 

(1) 记事 本 

记事 本 是 Windows 系统 自 带 的 文本 编辑 器 ， 也 是 最 简洁 方便 的 文本 编辑 器 ， 由 于 记事 本 
的 功能 过 于 单一 ， 因 此 要 求 开发 者 必须 熟练 掌握 JavaScript 语言 的 语法 、 对 象 、 方 法 和 属性 等 。 
对 于 初学 者 是 一 个 极 大 的 挑战 ， 因 此 不 建议 使 用 记事 本 。 由 于 记事 本 简单 方便 、 打 开 速 度 快 ， 
因此 常用 来 做 局 部 修改 。 

(2) UltraEdit 

UltraEdit 是 能 够 满足 一 切 编辑 需要 的 编辑 器 。UltraEdit 是 一 套 功能 强大 的 文本 编辑 器 ,可 
以 编辑 文本 、 十 六 进 制 、ASCII 码 ， 可 以 取代 记事 本 ， 内 建英 文 单词 检查 、C++ 及 VB 指令 突 
显 ， 可 同时 编辑 多 个 文件 ， 而 且 即 使 开启 很 大 的 文件 速度 也 不 会 慢 。 软 件 附 有 HTML 标记 颜 
色 显 示 、 搜 寻 蔡 换 以 及 无 限制 的 还 原 功能 ， 一 般 大 家 喜欢 用 其 来 代替 记事 本 的 文本 编辑 器 。 

(3) Dreamweaver 


前 面 章 节 已 经 讲述 ， 不 再 袭 述 。 


除了 上 述 编辑 器 外 ， 还 有 很 多 种 编辑 器 可 以 用 来 编写 JavaScript 程序 ， 如 Aptana、 
AB 1st Javascript Editor、Javascript Menu Master、 Platypus Javascript Editor、 SurfMap 


Javascript Editor 等 。“ 工 欲 善 其 事 ， 必 上 先 利 其 器 ” ,选择 一 款 适 合 自 己 的 JavaScript 
编辑 器 ， 可 以 让 程序 员 的 编辑 工作 事半功倍 。 


2. 运行 环境 
JavaScript 程序 的 运行 依赖 于 浏览 器 。 本 书 中 介绍 的 JavaScript 知识 点 几乎 适应 于 所 有 浏览 
器 ， 本 书 仍然 以 正 11.0 浏览 器 为 主 。 
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3. 调试 软件 
JavaScript 编辑 器 会 对 语法 进行 简单 的 错误 识别 , 不 同 的 浏览 器 也 提供 对 JavaScript 程序 的 
调试 功能 ， 在 此 不 歼 述 ， 请 读者 参阅 相关 资料 。 


11.2 在 HTML5 文件 中 使 用 JavaScript 代码 


在 HTMLS 文件 中 使 用 JavaScript 代码 主要 有 两 种 方法 ， 一 种 是 将 JavaScript 代码 书写 在 
HTMLS5 文件 ， 称 为 内 嵌 式 。 另 一 种 是 将 JavaScript 代码 书写 在 扩展 名 为 js 的 文件 中 ， 然 后 在 
HTMLS5 文件 中 引用 ， 称 为 外 部 引用 。 


11.2.1 JavaScript 做 入 HTML5 文件 


将 JavaScript 代码 直接 嵌入 到 HTMLS5 文件 中 时 ， 需 要 使 用 一 对 标记 <script></script>， 告 
诉 浏览 器 这 个 位 置 是 脚本 语言 。<script> 标 记 的 使 用 方法 ， 如 下 加 粗 部 分 代码 所 示 。 


<!DOCTYPE html> 

<html> 

<head> 

<title> JavaSscript 与 入 HTML5 文 件 </title> 
<script type="text/javascript"> 
// 向 页 面 输入 问候 语 

document .write("hello"); 
</script> 

</head> 

<body> 

</body> 

</html> 


在 上 述 代码 中 , type 属性 用 来 指明 脚本 的 语言 类 型 。 还 可 以 使 用 属性 language 来 表示 脚本 
的 语言 类 型 。 使 用 language 时 可 以 指明 JavaScript 的 版 本 .新 的 HTML 标准 不 建议 使 用 language 
属性 , 但 type 属性 在 早期 旧版 本 的 浏览 器 中 不 能 识别 , 因此 有 些 开发 者 会 同时 使 用 这 两 个 属性 。 
在 HTML5 标准 中 ， 建 议 使 用 type 属性 或 者 都 省 略 ， 如 下 加 粗 部 分 代码 所 示 。 


【 例 11.1】 (实例 文件 : chll\11.1.html) 

<!DOCTYPE html> 

<html> 

<head> 

<title> JavaScript 钨 入 HTML5 文 件 </title> 
<script> 

// 向 页 面 输入 问候 语 

document .write ("落日 无 情 最 有 情 ， 遍 催 万 树 暮 蝉 鸣 。") ; 


</script> 
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</head> 
<body> 

</body> 
</html> 


在 正 11.0 中 的 浏览 效果 如 图 11-1 所 示 。 


= “站 X 
人 站” D:\ 本 书 源 代 码 \code\ 图 ”CC 搜索 .… 
ls JavaScript 谨 入 HTML5 文 件 X | 上 

文件 (F) 沪 岛 (日 查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 
育 洛 百 放下， 人 SN 这 

落日 无 情 最 有 情 ， 遍 众 万 树 募 折 鸣 . 


图 11-1 JavaScript 嵌入 HIMLS 文件 


11.2.2 ”外 部 JavaScript 文件 


通过 前 面 的 学 习 ， 读 者 会 发 现 ， 在 HTML 文件 中 可 以 包含 CSS 代码 、JavaScript 代码 。 把 
这 些 代码 书写 在 同一 个 HTML 文件 中 ， 虽 然 简 捷 ， 但 却 使 HTML 代码 变 得 繁杂 ， 并 且 无 法 反 
复 使 用 。 为 了 解决 这 种 问题 ， 可 以 将 JavaScript 独立 成 一 个 脚本 文件 (扩展 名 为 js)， 在 HTML 


文件 中 调用 该 脚本 文件 ， 其 调用 方法 如 下 所 示 。 


<script src= 外 部 脚本 文件 路 径 > 
</sceript> 


将 上 述 程序 修改 为 调用 外 部 JavaScript 文件 ， 操 作 步 骤 如 下 : 


i@ 凤 新 建 JavaScript 文件 。 


启动 Dreamweaver CS5.5， 选 择 【 文 件 】> 【新 建 】 菜单 命令 ， 在 弹出 的 对 话 框 中 选择 页 


面 类 型 JavaScript， 单 击 【 创 建 】 按 钮 ， 保 存 文件 为 hellojs， 并 在 文件 中 输入 如 下 代码 。 
//Javascript 文件 的 内 容 
// 向 页 面 输入 问候 语 
document .write (" 听 来 人 月 尺 无 寻 处 ， 寻 到 旁边 却 不 声 。") ; 
I@g 到 新 建 HTML 文件 
按照 以 前 的 方法 创建 HIML 文件 ， 并 保存 。 注 意 ， 为 了 能 够 保证 示例 的 正常 运行 ， 
该 文件 与 hellojs 保存 于 同一 位 置 处 。 在 HIML 文件 中 ， 输 入 加 粗 部 分 的 代码 。 
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<!DOCTYPE html> 

<html> 

<head> 

<title> 外 部 JavaScript 文 件 </title> 
<script src=”hello.js”></script> 
</head> 

<body> 

</body> 

</html> 


程序 的 运行 结果 如 图 11-2 所 示 。 


=? 如 x 
切 ”“D:\ 本 书 源 代 码 odev 国 ~ 上 

大 外 部 Javascript 文 件 x | 

文件 (F) 编辑 (6 坦 看 (V) 收藏 夫 (A) 工具 (T) ” 

次 汪 百 度 一 下 , 你 祈 知 道 


听 来 月 尺 无 寻 处 ， 寻 到 旁边 却 不 声 。 


图 11-2 外 部 JavaScript 文件 
外 部 脚本 文件 的 使 用 大 大 简化 了 程序 , 且 提 高 了 复 用 性 , 在 使 用 时 有 以 下 几 点 必须 要 注意 。 


@ ”在 外 部 脚本 文件 中 ， 只 允许 包括 JavaScript 代码 ， 不 允许 出 现 其 他 代码 ， 初 次 接 
和 触 的 读者 很 容易 将 <scripf> 标 记 书写 在 脚本 文件 中 ， 这 是 最 忌讳 的 。 

@ 在 引用 外 部 脚本 文件 的 HTML 文件 中 , 使 用 <scrip 人 标记 的 src 属性 指定 外 部 脚本 
文件 ， 一 定 要 加 上 路 径 ， 通 常 使 用 相对 路 径 ， 并 且 文 件 名 要 带 扩展 名 。 

@ 在 引用 外 部 脚本 文件 的 HTML 文件 中 ,<script> 标 记 和 </scrip 人 标记 之 间 不 可 以 有 
任何 代码 ， 包 括 脚本 程序 代码 ， 且 </scripf> 标 记 不 可 以 省 略 。 

@ <script></scrip 信 标记 可 以 出 现在 HTML 文档 的 任何 位 置 ， 并 且 可 以 有 多 对 ， 在 没 
有 特殊 要 求 的 情况 下 ， 建 议 放 在 HTML 文档 的 head 部 分 。 


11.3 ”综合 实例 一 一 欢迎 光临 网 站 的 JavaScript 程序 


本 例 是 一 个 简单 的 JavaScript 程序 ， 主 要 用 来 说 明 如 何 编写 JavaScript 程序 以 及 在 HTML 
中 如 何 使 用 。 本 例 主 要 实现 的 功能 为 : 当 页 面 打开 时 ， 显 示 “ 尊 敬 的 客户 ， 欢 迎 您 光临 本 网 站 ” 
窗口 ， 关 闭 页 面 时 弹出 窗口 “欢迎 下 次 光临 ! ”， 程 序 效果 如 图 11-3 和 图 11-4 所 示 。 
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第 儿 章 


名 D:\ 本 书 源 代码 kodej 国 ~ 中 | 搜索- 


展 第 一 个 javascript 程 序 x [3 忆 第 一 个 Javascript 程 序 x | 


将 各 百度 -下 ,你 就 知 道 请 各 百度 一 下 ,你 新 知道 


站 ”DA\ 本 书 源 代码 \code 谤 图 ~ 中 搜索 


图 11-3 ”页面 加 载 时 效果 图 11-4 页面 关闭 时 效果 
有 具体 操作 步骤 如 下 : 
罗 则 新 建 HTML 文档 ， 输 入 以 下 代码 。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 第 一 个 Javascript 程 序 </title> 
</head> 

<body> 

</body> 

</html> 


ti 到 保存 HTML 文件， 选择 相应 的 保存 位 置 ， 文 件 名 为 welcome.html。 
i 旨 在 HIML 文档 的 head 部 分 输入 如 下 代码 。 


<script> 
// 页 面 加 载 时 执行 的 函数 
function showEnter(){ 


alert ("尊敬 的 客户 ， 欢 迎 您 光临 本 网 站 ") ; 
下 
// 页 面 关闭 时 执行 的 函数 


function showLeave(){ 


alert ("欢迎 下 次 光临 ! "); 


9 

// 页 面 加 载 事件 触发 时 调用 函数 

window.onload=showEnter; 

// 页 面 关 闭 事件 触发 时 调用 函数 

window.onbeforeunload=showLeave; 
</script> 


L 国 保存 网 页 ， 浏览 最 终 效果 。 
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11.4 专家 解 惑 


1. 什么 是 脚本 语言 ? 

答 : 脚本 语言 是 由 传统 编程 语言 简化 而 来 的 语言 ， 与 传统 编程 语言 有 很 多 相似 之 处 ， 也 有 
不 同 之 处 。 脚 本 语言 有 两 个 显著 示 特 点 ， 一 是 不 需要 编译 成 二 进 制 ， 以 文本 的 形式 存在 ; 二 是 
一 般 都 需要 其 他 语言 的 调用 执行 ， 不 能 独立 运行 。 

2. JavaScript 是 Java 的 变种 吗 ? 

答 : JavaScript 最 初 的 确 是 受 Java 启发 而 开始 设计 的 ， 而 且 设 计 的 目的 之 一 就 是 “看 上 去 
像 Java”， 因 此 语法 上 有 很 多 类 似 之 处 ， 许 多 名 称 和 命名 规范 也 是 借鉴 的 Java。 但 是 实际 上 ， 
JavaScript 的 主要 设计 原则 源 自 Self 和 Scheme， 与 Java 本 质 上 是 不 同 的 。 它 与 Java 名 称 上 的 
近似 ， 是 当时 网 景 为 了 营销 考虑 与 Sun 公司 达成 协议 的 结果 。 其 实 从 本 质 上 讲 JavaScript 更 像 
是 一 门 函 数 式 编程 语言 ， 而 非 面 向 对 象 的 语言 ， 它 使 用 一 些 智能 的 语法 和 语义 来 仿真 高 度 复杂 
的 行为 。 其 对 象 模型 极为 灵活 、 开 放 和 强大 ， 具 有 全 部 的 反射 性 。 

3. JavaScript 与 JScript 相同 吗 ? 

答 : 为 了 取得 技术 优势 ， 微 软 推出 了 JScript 来 迎战 JavaScript 的 脚本 语言 。 为 了 互 用 性 ， 
Ecma 国际 协会 (前 身 为 欧洲 计算 机 制造 商 协会 ) 建立 了 ECMA-262 标准 (ECMAScript) 。 现 
在 两 者 都 属于 ECMAScript 的 扩展 。 

4. JavaScript 是 一 门 简单 的 语言 吗 ? 

答 : 虽然 JavaScript 是 作为 给 非 程序 人 员 的 脚本 语言 而 非 给 程序 人 员 的 编程 语言 来 推广 和 
宣传 ， 但 是 JavaScript 是 一 门 具有 丰富 特性 的 语言 ， 有 着 和 其 他 编程 语言 一 样 的 复杂 性 ， 甚 至 
更 加 复杂 。 实 际 上 ， 你 必须 对 JavaScript 有 扎实 的 理解 才能 来 撰写 比较 复杂 的 程序 。 
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无 论 是 传统 编程 语言 ， 还 是 脚本 语言 ， 都 具有 数据 类 型 、 常 量 和 变量 、 运 算 符 、 表 达 式 、 
注释 语句 、 流 程控 制 语句 等 基本 元 素 。 这 些 基 本 元 素 构成 了 语言 基础 ， 本 章 讲 述 的 知识 是 学 习 
JavaScript 语言 的 基础 。 


12.1 数据 类 型 与 变量 


数据 类 型 是 对 一 种 数据 的 描述 ， 任 何 一 种 程序 语言 都 可 以 处 理 多 种 数据 。 有 些 数据 的 值 是 
不 确定 的 ， 在 不 同 的 时 刻 有 不 同 的 取 值 ， 在 JavaScript 语言 中 用 变量 来 处 理 这 些 数据 。 


12.1.1 数据 类 型 
JavaScript 中 的 数据 类 型 主要 包括 3 类 。 


1. 基本 数据 类 型 


JavaScript 中 常用 的 3 种 基本 数据 类 型 是 数值 数据 类 型 (Number)、 字 符 串 数据 类 型 (String) 
和 布尔 数据 类 型 (Boolean) 。 


(1) 数值 数据 类 型 

数值 数据 类 型 的 值 就 是 数字 , 例如 3、6.9、-7 等 。 在 JavaScript 中 没有 整数 和 浮 点 数 之 分 ， 
无 论 什 么 样 的 数字 都 属于 数字 型 ， 其 有 效 范 围 大 约 在 103%~103% 之 间 。 大 于 103% 的 数值 ， 超 
出 了 数值 类 型 的 上 限 , 即 无 穷 大 , 用 Infinity 表示 ; 小 于 1038 的 数值 ， 超 出 了 数值 类 型 的 下 限 ， 
即 无 穷 小 , 可 以 用 -Infinity 表示 。 如 果 JavaScript 在 进行 数学 运算 时 产生 了 错误 或 不 可 预知 的 结 
果 ， 就 会 返回 NaN (Nota Number) 。NaN 是 一 个 特殊 的 数字 ， 属 于 数值 型 。 

(2) 字符 串 数据 类 型 

字符 串 数据 类 型 是 由 双 引 号 〈(“”) 或 单 引号 (“”) 括 起 来 的 0 个 或 多 个 字符 组 成 的 
序列 ， 可 以 包括 大 小 写字 母 、 数 字 、 标 点 符号 或 其 他 可 显示 字符 以 及 特殊 字体 ， 也 可 以 包含 汉 
字 ， 一 些 字符 串 示例 及 其 解释 见 表 12-1。 
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表 12-1 字符 串 示例 


字符 串 解释 

"Hello Howin! " 字符 串 为 : Hello Howin! 
" 惠 文 ， 你 好 ! " 字符 串 为 : 惠 文 ， 你 好 ! 
wm 含 单个 字符 z 的 字符 串 

wn 含 单个 字符 s 的 字符 串 


不 含 任何 字符 的 空 字 符 串 
由 空格 构成 的 字符 串 
字符 串 为 : “Hello!I said 


"Hello!’I said" 


"Hello"! I said' 字符 串 为 :“Hello™! I said 


在 使 用 字符 串 时 ， 应 注意 以 下 几 点 。 
@ ”作为 字符 串 定 界 符 的 引号 必须 匹配 : 字符 串 前 面 使 用 的 是 双 引 号 (”) ， 那 么 在 
后 面 也 必须 使 用 双 引 号 (”) ， 反 之 ， 都 使 用 单 号 (") 。 在 用 双 引 号 (”) 作为 定 
界 符 的 字符 串 中 可 以 直接 含有 单 引 号 (*) ， 在 用 单 引 号 (*) 作 o 定 界 符 的 字符 
串 也 可 以 直接 含有 双 引 号 (”) 。 
@ 空 字符 串 中 不 包含 任何 字符 ， 用 一 对 引号 表示 ， 引 号 之 间 不 包含 任何 空格 。 
引号 必须 是 在 英文 输入 法 状态 下 输入 的 。 
通过 转 义 字符 “\” 可 以 在 字符 串 中 添加 不 可 显示 的 特殊 字符 , 或 者 防止 引号 匹配 混乱 问题 。 
常用 转 义 字符 见 表 12-2。 
表 12-2 常用 转 义 字符 及 含义 
转 义 序列 
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(3) 布尔 数据 类 型 

布尔 (Boolean) 数据 类 型 的 值 也 就 是 逻辑 型 ， 主 要 进行 逻辑 判断 ， 只 有 两 个 值 ， 即 true 
和 false， 分 别 表示 真 和 假 。 在 JavaScript 中 ， 可 以 用 0 表示 false， 非 0 整数 表示 true。 

2. 复合 数据 类 型 

复合 数据 类 型 主要 包括 3 种 : 用 来 保存 一 组 相同 或 不 同 数 据 类 型 数据 的 数组 ， 用 来 保存 一 
段 可 以 在 JavaScript 中 被 反复 调用 的 程序 的 函数 ， 用 来 保存 一 组 不 同类 型 的 数据 和 函数 等 的 对 
象 。 


(1) 数组 

在 JavaScript 中 ， 数 组 主要 用 来 保存 一 组 相同 或 不 同 数据 类 型 的 数据 ， 详 见 数 组 部 分 。 

(2) 函数 

在 JavaScript 中 ， 函 数 用 来 保存 一 段 程序 ， 这 段 程 序 可 以 在 JavaScript 中 反复 被 调用 ， 详 
见 函 数 部 分 。 

(3) 对 象 

在 JavaScript 中 ， 对 象 用 来 保存 一 组 不 同类 型 的 数据 和 函数 等 ， 详 见 对 象 部 分 。 

3. 特殊 数据 类 型 

特殊 数据 类 型 主要 包括 没有 值 存在 的 空 数 据 类 型 null 和 没有 进行 定义 的 无 定义 数据 类 型 


undefined 。 


(1) 无 定义 数据 类 型 undefined 
Undefined 的 意思 是 “未 定义 的 ”， 表 示 没 有 进行 定义 ， 通 常 只 有 执行 JavaScript 代码 时 才 
会 返回 该 值 。 在 以 下 几 种 情况 下 通常 都 会 返回 undefined。 


@ 在 引用 一 个 定义 过 但 没有 赋值 的 变量 时 ， 会 返回 undefined。 
@ 在 引用 一 个 不 存在 的 数组 元 素 时 ， 会 返回 undefined。 
@ 在 引用 一 个 不 存在 的 对 象 属性 时 ， 会 返回 undefined。 


由 于 undefined 是 一 个 返回 值 ， 因 此 可 以 对 该 值 进行 操作 ， 如 输出 该 值 或 将 其 与 其 
他 值 做 比较 。 


(2) 空 数据 类 型 null 
null 的 中 文 意思 是 “ 空 ”， 表 示 没 有 值 存在 ， 与 字符 串 、 数 值 、 布 尔 、 数 组 、 对 象 、 函 数 
和 undefined 都 不 同 。 在 做 比较 时 ，null 也 不 会 与 以 上 任何 数据 类 型 相等 。 
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12.1.2 ”变量 


变量 ， 顾 名 思 义 ， 在 程序 运行 过 程 中 ， 其 值 可 以 改变 。 变 量 是 存储 信息 的 单元 ， 对 应 于 某 
个 内 存 空 间 。 变 量 用 于 存储 特定 数据 类 型 的 数据 。 用 变量 名 代表 其 存储 空间 。 程 序 能 在 变量 中 
存储 值 和 取出 值 。 可 以 把 变量 比 作 超市 的 货架 (内存) ， 货 架 上 摆 放 着 商品 〈 变 量 ) ， 可 以 把 
商品 从 货架 上 取出 来 〈 读 取 ) ， 也 可 以 把 商品 放 入 货架 〈 赋 值 ) 。 

1. 标识 符 

JavaScript 编写 程序 时 ， 很 多 地 方 都 要 求 用 户 给 定名 称 ， 例 如 ，JavaScript 中 的 变量 、 函 数 
等 要 素 定 义 时 都 要 求 给 定名 称 。 可 以 将 定义 要 素 时 使 用 的 字符 序列 称 为 标识 符 。 这 些 标识 符 必 
须 遵循 如 下 命名 规则 。 


(1) 标识 符 只 能 由 字母 、 数 字 、 下 画 线 和 美元 符号 组 成 ， 而 不 能 包含 空格 、 标 点 符号 、 
运算 符 等 其 他 符号 。 

(2) 标识 符 的 第 一 个 字符 不 能 是 数字 。 

(3) 标识 符 不 能 与 JavaScript 中 的 关键 字 名 称 相同 ， 例 如 过 、else 等 。 


例如 ， 下 面 为 合法 的 标识 符 。 


UserName 
Int2 

File Open 
Sex 


例如 ， 下 面 为 不 合法 的 标识 符 。 


99BottlesofBeer 
Name space 
Tt Ss=All=0ver 


2. 变量 的 声名 

JavaScript 是 一 种 弱 类 型 的 程序 设计 语言 ， 变 量 可 以 不 声明 直接 使 用 。 所 谓 声明 变量 ， 即 
为 变量 指定 一 个 名 称 。 声 明 变 量 后 ， 就 可 以 把 它们 用 作 存 储 单元 。 

(1) 声明 变量 

JavaScript 中 使 用 关键 字 “var” 声 明 变 量 , 在 这 个 关键 字 之 后 的 字符 串 将 代表 一 个 变量 名 。 
其 格式 为 : 

var 标识 符 ; 


例如 ， 声 明 变量 usemame， 用 来 表示 用 户 名 ， 代 码 如 下 : 
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Var USeTrnamey 


另外 , 一 个 关键 字 var 也 可 以 同时 声明 多 个 变量 名 , 多 个 变量 名 之 间 必 须 用 逗号 “,” 分 隔 ， 
例如 ， 同 时 声明 变量 username、pwd、age， 分 别 表示 用 户 名 、 密 码 和 年 龄 ， 代 码 如 下 : 

var username pwd, age 

(2) 变量 赋值 

要 给 变量 赋值 ， 可 以 使 用 JavaScript 中 的 赋值 运算 符 ， 即 等 于 号 (=) 。 

声明 变量 名 时 同时 赋值 ， 例 如 ， 声 明 变 量 usemame， 并 赋值 为 “ 张 三 ”， 代 码 如 下 : 

var username=" 张 三 "; 


声明 变量 之 后 ， 对 变量 赋值 ， 或 者 对 未 声明 的 变量 直接 赋值 。 例 如 ， 声 明 变 量 age 后 再 为 
它 赋值 ， 或 直接 对 变量 count 赋值 。 
var age;  // 声 明 变量 


age=18; ”// 对 已 声明 的 变量 赋值 
count=4; ”// 对 未 声明 的 变量 直接 赋值 


JavaScript 中 的 变量 如 果 未 初始 化 (赋值 )， 默 认 值 为 undefined。 

3. 变量 的 作用 范围 

所 谓 变量 的 作用 范围 是 指 可 以 访问 该 变量 的 代码 区 域 。JavaScript 中 按 变 量 的 作用 范围 分 

为 全 局 变量 和 局 部 变量 。 

@ 全 局 变量 : 可 以 在 整个 HTML 文档 范围 中 使 用 的 变量 ， 这 种 变量 通常 都 是 在 函数 
体外 定义 的 变量 。 

@ 局 部 变量 : 只 能 在 局 部 范围 内 使 用 的 变量 ， 这 种 变量 通常 都 是 在 函数 体内 定义 的 
变量 ， 所 以 只 能 在 函数 体 中 有 效 。 


省 略 关键 宇 var 声明 的 变量 , 无论 是 在 函数 体内 ， 还 是 在 夯 数 体外 ， 都 是 全 局 变量 。 
ER 


12.1.3 ”保留 关键 字 


保留 字 是 在 JavaScript 中 有 特殊 意义 的 单词 , 如 前 面 多 次 使 用 的 关键 字 var、 用 于 创建 函数 
的 function 等 。 由 于 这 些 标识 符 已 经 被 JavaScript 使 用 ， 在 用 户 声明 变量 名 、 函 数 名 、 数 组 名 
等 命名 时 , 不 能 使 用 这 些 字 。JavaScript 中 关键 字 及 JavaScript 将 来 可 能 用 到 的 关键 字 见 表 12-3 
和 表 12-4。 
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表 12-3 JavaScript 中 的 关键 字 


关键 字 关键 字 关键 字 关键 字 关键 字 
break delete function return typeof 
case do 下 Switch Var 
catch else in this void 
continue false instanceof throw while 
debugger finally new true with 
default for null try 


Er FE 


abstract 


boolean 


12.2 ”运算 符 与 表达 式 


运算 符 是 程序 处 理 的 基本 元 素 之 一 ， 其 主要 作用 是 操作 JavaScript 中 的 各 种 数据 ， 包 括 变 
量 、 数 组 、 对 象 、 函 数 等 。 运算 符 是 可 以 用 来 操作 数据 的 符号 ,操作 数 是 被 运算 符 操作 的 数据 ， 
表达 式 则 是 JavaScript 中 一 个 有 意义 的 语句 。 

JavaScript 中 的 运算 符 是 用 来 对 变量 、 常 量 或 数据 进行 计算 的 符号 ， 指 挥 计算 机 进行 某 种 
操作 。 运 算 符 又 叫 作 操作 符 ， 可 以 将 运算 符 理解 为 交通 警察 的 命令 ， 用 来 指挥 行人 或 车 辆 等 不 
同 的 运动 实体 (运算 数 ) ， 最 后 达到 一 定 的 目的 。 

依照 运算 符 使 用 的 操作 数 的 个 数 来 划分 ，JavaScript 中 有 三 种 类 型 的 运算 符 : 一 元 运算 符 、 
二 元 运算 符 和 三 元 运算 符 。 

按照 运算 符 的 功能 可 以 分 为 下 面 几 种 运算 符 : 赋值 运算 符 、 算 术 运 算 符 、 关 系 运算 符 、 位 
操作 运算 符 、 逻 辑 运算 符 、 条 件 运 算 符 、 特 殊 运 算 符 。 
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12.2.1 算术 运算 符 及 其 表达 式 

算术 运算 符 〈arithmetic operators) 用 来 处 理 四 则 运算 的 符号 ， 是 最 简单 、 最 常用 的 符号 ， 
尤其 是 数字 的 处 理 几 乎 都 会 使 用 到 运算 符 。 

1. 算术 运算 符 

JavaScript 语言 中 提供 的 算术 运算 符 有 +、-、*、/、%、++、-- 七 种 ， 分 别 表 示 加 、 减 、 乘 、 
除 、 求 余数 、 自 增 和 自 减 。 其 中 ，+、-、*、/、%6 五 种 为 二 元 运算 符 ， 表 示 对 运算 符 左右 两 边 
的 操作 数 做 算术 ， 其 运算 规则 与 数学 中 的 运算 规则 相同 ， 即 先 乘除 后 加 减 。++、-- 两 种 运算 符 
都 是 一 元 运算 符 ， 其 结合 性 为 自 右 向 左 ， 在 默认 情况 下 表示 对 运算 符 右 边 的 变量 的 值 增 1 或 减 
1， 而 且 他 们 的 优先 级 比 其 他 算术 运算 符 高 。 
2. 算术 表达 式 
由 算术 运算 符 和 操作 数组 成 的 表达 式 称 为 算术 表达 ， 算 术 表 达 式 的 结合 性 为 自 左 向 右 。 常 


用 的 算术 运算 符 和 表达 式 使 用 说 明 见 表 12-5。 
表 12-5 算术 运算 符 和 表达 式 


示例 〈 假 设 i=1) 
3+2 (结果 : 5) 


执行 加 法 运算 〈 如 果 两 个 操作 数 
是 字符 串 ， 那 么 该 运算 符 用 作 字 
符 串 连接 运算 符 ， 将 一 个 字符 串 
添加 到 另 一 个 字符 串 的 末尾 ) 


% 获得 进行 除法 运算 后 的 余数 
二 将 操作 数 加 1 
-- 将 操作 数 减 1 


'a+14 (结果 : 111) 
操作 数 1+ 操作 数 2 'a+b' (结果 : 195) 
'a+"bcd" (结果 : abcd) 


12+"bcd" (结果 : 12bcd) 
操作 数 1 - 操作 数 2 3-2 (结果 : 1) 

操作 数 1 * 操作 数 2 3*2〔 结 果 : 6) 
操作 数 1/ 操作 数 2 3/2 (结果 : 1) 
操作 数 1 % 操作 数 2 3%2 (结果 : 1) 
操作 数 ++ 或 + 操作 数 itt/+Hi (结果 : 1/2) 
操作 数 -- 或 -- 操 作 数 i--/--i (结果 : 1/0) 


12.2.2 ”赋值 运算 符 及 其 表达 式 
赋值 就 是 把 一 个 数据 赋值 给 一 个 变量 。 例 如 ，myName=“ 张 三 ”的 作用 是 执行 一 次 赋值 


操作 ， 即 把 常量 “ 张 三 ”赋值 给 变量 myName 。 
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1. 赋值 运算 符 

赋值 运算 符 为 二 元 运算 符 ， 要 求 运算 符 两 侧 的 操作 数 类 型 必须 一 致 (或 者 右边 的 操作 数 必 
须 可 以 隐 式 转换 为 左边 操作 数 的 类 型 ) 。JavaScript 中 提供 的 简单 赋值 运算 符 有 =， 复 合 赋值 运 
算 符 有 +=、- 一 、 寺 、 三 、%=、&=-、 上 =、 生 、<<=、>>=。 


在 书写 复合 赋值 运算 符 时 ， 两 个 符号 之 间 一 定 不 能 有 空格 ， 否 则 将 会 出 错 . 
ES 


2. 赋值 表达 

由 赋值 运算 符 和 操作 数组 成 的 表达 式 称 为 赋值 表达 式 。 赋 值 表 达 式 的 功能 是 计算 表达 式 的 
值 再 赋予 左 侧 的 变量 。 赋 值 表达 式 可 以 分 为 简单 赋值 运算 符 (=) 和 复合 赋值 运算 符 。 复 合 赋 
值 运算 符 是 由 一 个 算术 运算 符 或 其 他 运算 符 与 一 个 简单 赋值 运算 符 组 合 构成 (如 +=) 。 一 方面 
简化 了 程序 ， 使 程序 看 上 去 精练 ， 另 一 方面 提高 了 编译 效率 ， 赋 值 表 达 式 的 一 般 形 式 如 下 : 

变量 ”赋值 运算 符 表达 式 


赋值 表达 式 的 计算 过 程 是 : 首先 计算 表达 式 的 值 ， 然 后 将 该 值 赋 给 左 侧 的 变量 。JavaScript 
语言 中 常用 赋值 表达 式 的 使 用 说 明 详 见 表 12-6。 


表 12-6 ”常见 赋值 表达 式 使 用 说 明 


%= 运算 结果 = 操作 数 1 % 操作 数 2 x%= 10 x=x% 10 


3. 赋值 表达 式 需 要 注意 的 几 点 

(1) 赋值 的 左 操作 数 必须 是 一 个 变量 ，JavaScript 中 可 以 对 变量 进行 连续 赋值 ， 这 时 赋值 
运算 符 是 右 关 联 的 ， 这 意味 着 从 右 向 左 运算 符 被 分 组 。 例 如 ， 形 如 a=b=c 的 表达 式 等 价 于 
a=(b=c)。 

(2) 如 果 赋 值 运 算 符 两 边 的 操作 数 类 型 不 一 致 ， 存 在 隐 式 转换 时 ， 系 统 就 会 自动 将 赋值 
号 右边 的 类 型 转换 为 左边 的 类 型 再 赋值 ; 不 存在 隐 式 转换 时 ， 就 要 先进 行 显 式 类 型 转换 ， 否 则 
程序 会 报错 。 


JavaScript 语言 基础 第 12 齐 


12.2.3 ”关系 运算 符 及 其 表达 式 

关系 运算 实际 上 是 逻辑 运算 的 一 种 , 可 以 把 它 理解 为 一 种 “判断 ”, 判断 的 结构 要 么 是 “ 真 ”， 
要 么 是 “ 假 ”， 也 就 是 说 关系 表达 式 的 返回 值 总 是 布尔 值 。JavaScript 中 定义 关系 运算 符 的 优 
先 级 低 于 算术 运算 符 ， 高 于 赋值 运算 符 。 

1. 关系 运算 符 

JavaScript 语言 中 定义 的 关系 运算 符 有 一 (等 于 ) 、!= (不 等 于 ) 、< (小 于 ) 、> (大 于 ) 、 
<= (小 于 或 等 于 ) 、>= (大 于 或 等 于 ) 6 种 。 


关系 运算 符 中 的 等 于 号 一 很 容易 与 赋值 号 = 混淆， 一 定 要 记 住 : -是 赋值 运算 符 ， 
| 一 是 关系 运算 符 . 


2. 关系 表达 式 

由 关系 运算 符 和 操作 数 构 成 的 表达 式 称 为 关系 表达 式 。 关系 表 达 式 中 的 操作 数 可 以 是 整 型 
数 、 实 型 数 、 布 尔 型 、 枚 举 型 、 字 符 型 、 引 用 型 等 。 对 于 整数 类 型 、 实 数 类 型 和 字符 类 型 ， 上 
述 六 种 比较 运算 符 都 可 以 适用 ， 对 于 布尔 类 型 和 字符 串 的 比较 运算 符 实际 上 只 能 使 用 == 和 !=。 
例如 : 


3>2 结 果 为 true 

4 .5==4 结 果 为 false 
'a'>'b' 结 果 为 false 
true==false 结 果 为 false 
"abc"=="asf" 结 果 为 false 


两 个 字符 囊 值 只 有 都 为 null 或 两 个 字符 串 长 度 相同 、 对 应 的 字符 序列 也 相同 的 非 空 
| 字符 囊 时 比较 的 结果 才能 为 true. 


12.2.4 位 运算 符 及 其 表达 式 


1. 位 运算 符 

任何 信息 在 计算 机 中 都 是 以 二 进 制 的 形式 保存 的 。 位 运算 符 就 是 对 数据 按 二 进 制 位 进行 运 
算 的 运算 符 。JavaScript 语言 中 的 位 运算 符 有 & (与 )、| (或 ) 、^( 异 或 ) 、~( 取 补 ) 、<< 
( 左 移 ) 、>> ( 右 移 ) 。 其 中 ， 取 补 运算 符 为 一 元 运算 符 ， 而 其 他 的 位 运算 符 都 是 二 元 运算 符 。 
这 些 运 算 都 不 会 产生 溢出 。 位 运算 符 的 操作 数 为 整 型 或 者 是 可 以 转换 为 整 型 的 任何 其 他 类 型 。 

2. 位 运算 表达 式 

由 位 运算 符 和 操作 数 构 成 的 表达 式 为 位 运算 表达 式 。 在 位 运算 表达 式 中 ， 系 统 首先 将 操作 
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数 转换 为 二 进 制 数 ， 然 后 进行 位 运算 ， 计 算 完毕 后 ， 再 将 其 转换 为 十 进 制 整数 。 各 种 位 运算 方 
法 见 表 12-7。 


表 12-7 ”位 运算 表达 式 计算 方法 


描述 


结果 


与 运算 。 操 作 数 中 的 两 个 位 都 为 
1， 结 果 为 1， 两 个 位 中 有 一 个 为 | 8&3 
0， 结 果 为 0 


结果 为 8。8 转换 二 进 制 为 1000, 3 转换 二 
进 制 为 0011, 与 运算 结果 为 1000， 转 换 十 
进 制 为 8 


或 运算 。 操 作 数 中 的 两 个 位 都 为 
0， 结 果 为 0， 和 否则， 结果 为 0 


异 或 运算 。 两 个 操作 位 相同 时 ， 
结果 为 0， 不 相同 时 ， 结 果 为 1 


取 补 运算 , 操作 数 的 各 个 位 取 反 ， 
即 1 变 以 0，0 变 为 1 


左 移 位 。 操 作 数 按 位 左 移 ， 高 位 
被 丢弃 ， 低 位 顺序 补 0 

右 移 位 。 操 作 数 按 位 右 移 ， 低 位 
被 丢弃 ， 其 他 各 位 顺序 一 次 右 移 


结果 为 11。8 转换 二 进 制 为 1000，3 转换 
二 进 制 为 0011, 或 运算 结果 为 1011, 转换 
十 进 制 为 11 

结果 为 11。8 转换 二 进 制 为 1000，3 转换 
二 进 制 为 0011, 异 或 运算 结果 为 1011, 转 
换 十 进 制 为 11 

结果 为 -9。8 转换 二 进 制 为 1000， 取 补 运 
算 后 为 0111， 对 符号 位 取 补 后 为 负 ， 转 换 
十 进 制 为 -9 

结果 为 32。8 转换 二 进 制 为 1000， 左 移 两 
位 后 100000， 转 换 为 十 进 制 为 32 

结果 为 2。8 转换 二 进 制 为 1000， 右 移 两 
位 后 10， 转 换 为 十 进 制 为 2 


12.2.5 ”逻辑 运算 符 与 逻辑 表达 式 

在 实际 生活 中 ， 有 很 多 的 条 件 判断 语句 的 例子 , 例如, “ 当 我 放假 了 , 并且 有 足够 的 费用 ， 
我 一 定 去 西双版纳 旅游 ”， 这 人 句 话 表明 ， 只 有 同时 满足 “放假 ”和 “足够 费用 ”这 两 个 条 件 ， 
你 的 想法 才能 成 立 。 类 似 这 样 的 条 件 判 断 ， 在 JavaScript 语言 中 可 以 采用 罗 辑 运算 符 来 完成 。 

1. 逻辑 运算 符 

JavaScript 语言 提供 了 &&、||、!， 分 别 是 逻辑 与 、 风 辑 或 、 人 逻辑 非 三 种 逻辑 运算 符 。 风 辑 
运算 符 要 求 操作 数 只 能 是 布尔 型 。 逻 辑 与 和 逻辑 非 都 是 二 元 运算 符 ， 要 求 有 两 个 操作 数 ， 而 好 
辑 非 为 一 元 运算 符 ， 只 有 一 个 操作 数 。 

逻辑 非 运 算 符 表示 对 某 个 布尔 型 操作 数 的 值 求 反 ， 即 当 操 作 数 为 false 时 运算 结果 返回 
true， 当 操作 数 为 true 时 运算 结果 返回 false。 

逻辑 与 运算 符 表 示 对 两 个 布尔 型 操作 数 进行 与 运算 ， 并 且 仅 当 两 个 操作 数 均 为 tue 时 ， 结 
果 才 为 true。 

逻辑 或 运算 符 表示 对 两 个 布尔 型 操作 数 进行 或 运算 ， 两 个 操作 数 中 只 要 有 一 个 操作 数 为 
true 时 ， 结 果 就 是 tue。 

为 了 方便 掌握 逻辑 运算 符 的 使 用 ， 逻 辑 运 算 符 的 运算 结果 可 以 用 逻辑 运算 的 “ 真 值 表 ”来 
表示 ， 见 表 12-8。 
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表 12-8 真 值 表 
| a b la a&&b allb 
| true true false true true 
| true | false false false | true 
false | true true false | true 
false false true false false 


2. 逻辑 表达 式 
由 逻辑 运算 符 组 成 的 表达 式 称 为 逻辑 表达 式 .逻辑 表达 式 的 结果 只 能 是 布尔 值 , 要么 是 true 


要 么 是 false。 在 逻辑 表达 式 的 求 值 过 程 中 ,不 是 所 有 的 逻辑 运算 符 都 被 执行 。 有 了 时候 ， 不 需要 
执行 所 有 的 运算 符 ， 就 可 以 确定 罗 辑 表达 式 的 结果 。 只 有 在 必须 执行 下 一 个 逻辑 运算 符 后 才能 
求 出 逻辑 表达 式 的 值 时 ， 才 继续 执行 该 运算 符 。 这 种 情况 称 为 逻辑 表达 式 的 “短路 ”。 

例如 ， 表 达 式 a&&b， 其 中 a 和 均 为 布尔 值 ， 系 统 在 计算 该 逻辑 表达 式 时 ， 首 先 判断 a 
的 值 ， 如 果 a 为 ttue， 再 判断 b 的 值 ， 如 果 a 为 false， 系 统 不 需要 继续 判断 b 的 值 ， 直 接 确定 
表达 式 的 结果 为 false。 

逻辑 运算 符 通常 和 关系 运算 符 配 合 使 用 ， 以 实现 判断 语句 。 例 如 ， 要 判断 一 个 年 份 是 否 为 
半年 。 国 年 的 条 件 是 : 能 被 4 整除 , 但 是 不 能 被 100 整除 , 或 者 是 能 被 400 整除 。 设 年 份 为 year， 
半年 与 否 就 可 以 用 一 个 罗 辑 表达 式 来 表示 : 

(Years400) ==011((Yyears4)==0&& (year®%100) !=0) 

逻辑 表达 式 在 实际 应 用 中 非常 广泛 ,以 及 后 续 学 习 的 流程 控制 语句 中 的 条 件 都 会 涉及 逻辑 
表达 式 的 使 用 。 
12.2.6 其 他 运算 符 及 运算 符 优 先 级 


1. 条 件 运算 符 及 其 表达 式 
在 JavaScript 语言 中 唯一 的 一 个 三 元 运算 符 “?:”， 有 时 也 将 其 称 为 条 件 运 算 符 。 由 条 件 
运算 符 组 成 的 表达 式 称 为 条 件 表达 式 。 一 般 表示 形式 如 下 : 


条 件 表达 式 ? 表 达 式 1 :表达 式 2 

先 计算 条 件 ， 然 后 进行 判断 。 如 果 条 件 表达 式 的 结果 为 tue， 计 算 表 达 式 1 的 值 ， 表 达 式 
1 为 整个 条 件 表达 式 的 值 ， 否 则 ， 计 算 表 达 式 2， 表 达 式 2 为 整个 条 件 表达 式 的 值 。 

?: 的 第 一 个 操作 数 必 须 是 一 个 可 以 隐 式 转换 成 bool 型 的 常量 、 变 量 或 表达 式 ， 如 果 上 述 
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两 个 条 件 中 一 个 也 不 满足 ， 则 发 生 运行 时 错误 。 

?: 的 第 二 个 、 第 三 个 操作 数控 制 了 条 件 表达 式 的 类 型 。 它 们 可 以 是 JavaScript 语言 中 任意 
类 型 的 表达 式 。 

例如 ， 实 现 求 出 a 和 b 中 最 大 数 的 表达 式 。 

a>b?a:b // 取 a 和 b 的 最 大 值 


条 件 运算 符 相当 于 后 续 学 习 的 让 .else 语句 。 

其 他 运算 符 还 有 很 多 ， 例 如 逗号 运算 符 、void 运算 符 、new 运算 符 等 ， 在 此 不 袭 述 。 

2. 运算 符 优先 级 

运算 符 的 种 类 非常 多 ， 通 常 不 同 的 运算 符 又 构成 了 不 同 的 表达 式 ， 甚 至 一 个 表达 中 又 包含 
有 多 种 运算 符 ， 因 此 他 们 的 运算 方法 应 该 有 一 定 的 规律 性 。JavaScript 语言 规定 了 各 类 运算 符 
的 运算 级 别 及 结合 性 等 ， 见 表 12-9。 


表 12-9 运算 符 优先 级 别 列表 


最 高 ) 结合 性 
括号 0 从 左 到 右 
沪 自 加 / 自 减 运算 符 ++/-- 从 右 到 左 
3 乘法 运算 符 、 除法 运算 符 、 取 模 | 。 从 左 到 右 
运算 符 
4 加 法 运算 符 、 减 法 运算 符 Es 从 左 到 右 
小 于 等 于 、 大 于 、 大 于 等 0 从 左 到 右 
6 等 于 、 不 等 于 == = 从 左 到 右 
7 逻辑 与 && 从 左 到 右 
8 风 辑 或 | 从 左 到 右 
9 赋值 运算 符 和 快捷 运算 符 =、+4=、*= =、 %=、 -= | 从 右 到 左 


建议 在 写 表 达 式 的 时 候 ， 如 果 无 法 确定 运算 符 的 有 效 顺 序 ， 就 尽量 采用 括号 来 保证 运算 的 
顺序 ， 这 样 也 使 得 程序 一 目 了 然 ， 而 且 自己 在 编程 时 能 够 思路 清晰 。 


12.3 ”流程 控制 语句 


无 论 传统 的 编程 语言 还 是 脚本 语言 ， 构 成 程序 的 基本 结构 无 外 乎 于 顺序 结构 、 选 择 结构 和 
循环 结构 三 种 。 

顺序 结构 是 最 基本 也 是 最 简单 的 程序 ， 一 般 由 定义 常量 和 变量 语句 、 赋 值 语句 、 输 入 /和 输 
出 语句 、 注 释 语 句 等 构成 。 顺 序 结构 在 程序 执行 过 程 中 ， 按 照 语句 的 书写 顺序 从 上 至 下 依次 执 
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行 ， 但 大 量 实际 问题 需要 根据 条 件 判断 ， 以 改变 程序 执行 顺序 或 重复 执行 某 段 程序 ， 前 者 称 为 
选择 结构 ， 后 者 称 为 循环 结构 。 本 章 将 对 选择 结构 和 循环 结构 进行 详细 阐述 。 


12.3.1 注释 语句 和 语句 块 


1. 注释 
注释 通常 用 来 解释 程序 代码 的 功能 (增加 代码 的 可 读 性 ) 或 阻止 代码 的 执行 (调试 程序 》， 
不 参与 程序 的 执行 。 在 JavaScript 中 注释 分 为 单行 注释 和 多 行 注释 两 种 。 


(1) 单行 注释 语句 

在 JavaScript 中 ， 单 行 注释 以 双 斜 本 “/ ”开始 ， 直 到 这 一 行 结束 。 单 行 注 释 “/” 可 以 放 
在 行 的 开始 或 一 行 的 末尾 ， 无 论 放 在 哪里 ， 从 “//” 符 号 开始 到 本 行 结束 为 止 的 所 有 内 容 都 不 
会 执行 。 在 一 般 情况 下 ， 如 果 “//” 位 于 一 行 的 开始 ， 就 用 来 解释 下 一 行 或 一 段 代码 的 功能 ; 
如 果 “//” 位 于 一 行 的 末尾 ， 就 用 来 解释 当前 行 代码 的 功能 。 如 果 用 来 阻止 一 行 代码 的 执行 ， 
也 常 将 “//” 放 在 一 行 的 开始 ， 如 下 加 粗 代码 所 示 。 


<!DOCTYPE html> 

<html> 

<head> 
<title>date 对 象 </title> 
<script> 

function disptime() 


{ 
// 创 建 日 期 对 象 now， 并 实现 当前 日 期 的 输出 
Var now= new Date(); 
//document .write ("<h1> 河 南 旅游 网 </h1>") ; 
document .write ("<H2> 今 天 日 期 :"+now.getYear () +" 年 "+ (now.getMonth () +1)+" 月 
"+now.getDate()+" 日 </H2>"); ”// 在 页 面 上 显示 当前 年 月 日 
} 
</script> 
<body onload="disptime()"> 
</body> 
</html> 


以 上 代码 中 ， 共 使 用 三 个 注释 语句 。 第 一 个 注释 语句 将 “//” 符 号 放 在 了 行 首 ， 通 常用 来 
解释 下 面 代 码 的 功能 与 作用 。 第 二 个 注释 语句 放 在 了 代码 的 行 首 ， 阻 止 了 该 行 代码 的 执行 。 第 
三 个 注释 语句 放 在 了 行 的 末尾 ， 主 要 是 对 该 行 的 代码 进行 解释 说 明 。 

(2) 多 行 注释 

单行 注释 语句 只 能 注释 一 行 的 代码 ， 假 设 在 调试 程序 时 ， 希 望 有 一 段 代 码 都 不 被 浏览 器 执 
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行 或 者 对 代码 的 功能 说 明 一 行书 写 不 完 ， 就 需要 使 用 多 行 注释 语句 。 多 行 注释 语句 以 * 开 始 ， 
以 */ 结 束 ， 可 以 注释 一 段 代码 。 

2. 语句 块 

语句 块 是 一 些 语句 的 组 合 ， 通 常 语句 块 都 会 被 一 对 大 括号 括 起 来 。 在 调用 语句 块 时 ， 
JavaScript 会 按 书 写 次 序 执行 语句 块 中 的 语句 。JavaScript 会 把 语句 块 中 的 语句 看 成 是 一 个 整体 
全 部 执行 ， 语 句 块 通常 用 在 函数 中 或 流程 控制 语句 中 。 


12.3.2 选择 语句 

在 现实 生活 中 ， 经常 需要 根据 不 同 的 情况 做 出 不 同 的 选择 。 例 如 ， 如 果 今 天 下 雨 体育 课 就 
改 为 在 室内 进行 ， 如 果 不 下 雨 体育 课 就 在 室外 进行 。 在 程序 中 ， 要 实现 这 些 功 能 就 需要 使 用 选 
择 结构 语句 。JavaScript 语言 提供 的 选择 结构 语句 有 寺 语 句 、if...else 语句 和 switch 语句 。 

1.if 语 句 

单 计 语句 用 来 判断 所 给 定 的 条 件 是 否 满足 , 根据 判定 结果 ( 真 或 假 ) 决定 所 要 执行 的 操作 。 
让 语句 的 一 般 表示 形式 为 : 


if (条 件 表达 式 ) 


语句 块 ; 
} 


关于 让 语句 语法 格式 的 几 点 说 明 如 下 : 


(1) 站 关键 字 后 的 一 对 圆 括号 不 能 省 略 。 圆 括号 内 的 表达 式 要 求 结果 为 布尔 型 或 可 以 隐 
式 转换 为 布尔 型 的 表达 式 、 变 量 或 常量 ， 即 表达 式 返 回 的 一 定 是 布尔 值 true 或 false。 

(2) 站 表达 式 后 的 一 对 大 括号 是 语句 块 的 语法 。 程 序 中 的 多 个 语句 放 在 一 对 大 括号 内 ， 
可 构成 语句 块 。 让 语句 中 的 语句 块 是 一 个 语句 时 ， 大 括号 可 以 省 略 ; 是 一 个 以 上 的 语句 时 ， 大 
括号 一 定 不 能 省 略 。 

(3) 站 语句 表达 式 后 一 定 不 要 加 分 号 ， 如 果 加 上 分 号 ， 代 表 条 件 成 立 后 执行 空 语 句 ， 在 
VS2008 中 调试 程序 不 会 报错 ， 只 会 警告 。 

(4) 当 让 语句 的 条 件 表达 式 返回 tue 值 时 ， 程 序 执行 大 括号 里 的 语句 块 ， 当 条 件 表达 式 
返回 false 值 时 ， 将 跳 过 语句 块 ， 执 行 大 括号 后 面 的 语句 ， 如 图 12-1 所 示 。 
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图 12-1 这 语句 执行 流程 


【 例 12.1】 设计 程序 ， 实 现 银行 汇款 手续 费 金额 的 收取 。 假 设 银行 汇款 手续 费 为 汇款 金额 
的 1%， 手 续费 最 低 为 2 元 。 预 览 页 面 后 ， 显 示 如 图 12-2 所 示 的 效果 。 在 第 一 个 文本 框 中 输入 
汇款 金额 ， 单 击 【确定 】 按 钮 在 第 二 个 文本 框 中 显示 汇款 手续 费 ， 如 图 12-3 和 图 12-4 所 示 。 


一 口 x se. 口 x 
要 ”D:\ 本 书 源 代码 \code 迹 图 ”| 搜索 .… 着 ”DA 本 书 源 代码 \codej 图 ”搜索 .… 
局 银行 ; 丈 手续 费 x 加 区 银行 汇 球 手 纺 费 x 加 


文件 (F) 编辑 (E) 查看 (V) 收藏 夹 (A) 工具 (T) 帮助 (H) 


文件 (F) 编辑 (5) 查看 (V) 收藏 只 (A) 工具 (T) 帮助 (H) 
请 当 百 度 一 下 ， 你 新 知道 


襄 汪 百度 一 下 ， 你 就 知道 


汇款 金额 : 汇款 金额 [900 
手续 费 : 手续 费 : [9 
确定 确定 
图 12-2 银行 汇款 系统 图 12-3 显示 手续 费 
口 x 
| 丫 ”DA 本 书 源 代码 \code 详 图 ”已 搜索 .… 
| 所 恨 生 CK 入 要 x 加 
文件 (P) 编 误 () 查看 (V) 性 训 夫 (A】 工具 (T) 帮助 (H) 
育 当 百度 一 下 ， 你 8 知道 
汇款 金额 ，|150 
手续 费 : [2 
确定 
图 12-4 手续 费 不 足 2 元 
具体 操作 步骤 如 下 : 


0 则 创建 HTML 文件 ， 代 码 如 下 : 


精通 HTML54CS53+JavaScript 网 页 设计 〔 视 频 教学 版 (第 2 版 ) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 银 行 汇款 手续 费 </title> 
<style> 
label{ 
width:100px; 
text-align:right; 
display:block; 
float:left; 
} 
sectiont{ 
width:260px; 
text-align:center; 
} 
</style> 
</head> 
<body> 
<section> 
<form name="myForm" action="" method="get"> 
<P><labe1> 汇 款 金额 : </label><input type="text" name="txtRemittance" 
/></P> 
<p><labe1> 手 续费 : </label><input type="text" name="txtFee" 
readonly/></p> 
<p><input type="button" value=" 确 定 "></p> 
</form> 
</scetion> 
</body> 
</html> 


HTML 文件 中 包含 两 个 对 section 标记 和 label 标记 修饰 的 样式 表 。 为 了 保证 下 面 代 码 的 正 
确 执 行 ， 请 务必 注意 form 标记 、input 标记 的 name 属性 值 ， 一 定 要 同 本 例 一 致 。 


罗 2 在 HTML 文件 的 head 部 分 ， 输 入 JavaScript 代码 ， 如 下 所 示 。 


<script> 
function calc(){ 
var Remittance=document .myForm.txtRemittance.value; 
// 将 输入 的 汇款 金额 赋值 给 变量 
var Fee=Remittance*0.01; // 计 算 汇 款 手续 费 
if (Fee<2) 
{ 
Fee=2; // 小 于 2 元 时 ， 手 续费 为 2 元 
上 
document .myForm.txtFee .value=Fee; 
. 
</acript> 
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i@ 旨 为 确定 按钮 添加 单 击 (onclick) 事件 ， 调 用 计算 (calc) 函数 。 将 HIML 文件 中 ， 
“<p><input type="button" value=" 确 “ 定 "></p>” 这 一 行 代码 修改 成 如 下 代码 : 

<p><input type="button" value=" 确 定 " onclick="calc()"></p> 

案例 总 结 : 在 本 例 中 用 到 了 读 取 和 设置 文本 框 的 值 以 及 对 象 事件 知识 , 读者 先 按 示例 制作 ， 
后 续 章 节 会 介绍 。 

2. if...else 语句 

单 下 语句 只 能 对 满足 条 件 的 情况 进行 处 理 , 但 是 在 实际 应 用 中 , 需要 对 两 种 可 能 都 做 处 理 ， 
即 满足 条 件 时 执行 一 种 操作 ， 不 满足 条 件 时 执行 另外 一 种 操作 。 可 以 利用 JavaScript 语言 提供 
的 让..else 语句 来 完成 上 述 要 求 。if...else 语句 的 一 般 表 示 形 式 为 : 

if (条 件 表达 式 ) 

{ 

语句 块 1; 


} 
else 


本 
语句 块 2; 
} 


让 .else 语句 可 以 把 它 理解 为 中 文 的 “如 果 .… 就 ...， 否 则 ...”。 上 述 语句 可 以 表示 为 假设 
让 后 的 条 件 表达 式 为 tue 就 执行 语句 块 1， 否 则 执行 else 后 面 的 语句 块 2， 执 行 流程 如 图 12-5 
所 示 。 


图 12-5 if...else 语句 执行 流程 


例如 ， 给 定 一 个 分 数 ， 判 断 是 否 及 格 并 将 结果 显示 在 弹出 窗口 中 ， 可 以 使 用 如 下 代码 。 


Var double score =607 
if(score<60) 
alert ("不 及 格 "); 
了 
else 
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{ 
alert ("及 格 "); 
} 


3. 选择 说 套 语句 

在 实际 应 用 中 ， 一 个 判断 语句 存在 多 种 可 能 的 结果 时 ， 可 以 在 站 .else 语句 中 再 包含 一 个 
或 多 个 让 语句 。 这 种 表示 形式 称 为 让 语句 嵌 套 。 常 用 的 嵌 套 语句 为 让..else 语句 ， 一 般 表 示 形 
式 为 : 


if (表达 式 1) 
{ 
if (表达 式 2) 
语句 块 1; // 表达 式 2 为 真 时 执行 
} 
else 
{ 
语句 块 2; // 表达 式 2 为 假 时 执行 
} 
} 
else 
{ 
if (表达 式 3) 
语句 块 3; // 表达 式 3 为 真 时 执行 
} 
else 
{ 
语句 块 4; // 表达 式 3 为 假 时 执行 
} 
号 


首先 执行 表达 式 1， 如 果 返 回 值 为 tue， 再 判断 表达 式 2， 如 果 表 达 式 2 返回 tue， 就 执行 
语句 块 1， 和 否则 执行 语句 块 2; 表达 式 1 返回 值 为 false， 再 判断 表达 式 3， 如 果 表 达 式 3 返回 
值 为 tue， 则 执行 语句 块 3， 和 否则 执行 语句 块 4。 


【 例 12-2】 利 用 让..else 嵌 套 语句 实现 按 分 数 划 分 等 级 。90 分 以 上 为 优秀 ，80 一 89 分 为 良 
好 ，70 一 79 分 为 中 等 ，60 一 69 分 为 及 格 ，60 分 以 下 为 不 及 格 。 预 览 网 页 ， 如 图 12-6 所 示 。 在 
文本 框 中 输入 分 数 ， 单 击 【 判 断 】 按 钮 ， 在 弹出 窗口 中 显示 等 级 ， 如 图 12-7 所 示 。 


JavaScript 语言 基础 第 12 齐 


- OO x 
本 D:\ 本 书 源 代码 \code 迹 图 ”搜索 
所 学生 成 汪 等 级 划分 x 加 
文件 (P) 编辑 (6 查看 (V) 收藏 去 (A) 工具 (D) 帮助 (H) 
请 各 百度 一 下 ,你 和 0 道 


间 Di 本 书 源 代 码 \code 汪 图 ” 〇 | 搜索- 


成 绩 : [判断 


图 12-6 根据 分 数 判断 等 级 图 12-7 显示 判断 结果 
具体 操作 步骤 如 下 : 
上 @ 央 创建 HTML 文件 ， 代 码 结构 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title> 学 生成 绩 等 级 划分 </title> 

</head> 

<body> 
<form name="myForm" action="" method="get"> 
<P> 
<labe1> 成 绩 : </label><input type="text" name="txtScore" /> 
<input type="button" value=" 判 ” 断 "> 
</P> 
</form> 

</body> 

</html> 


有 2 在 HTML 文件 的 head 部 分 ， 输 入 如 下 代码 : 


<script> 
function Verdict(){ 
Var Score=document .myForm.txtScore.value; 
if(Score<60) 
上 
alert ("不 及 格 "); 
} 
else 
if (Score<=69) {alert ("及 格 ");} 
clas 
if (Score<=79) {alert ("中 等 ") ;} 
else 
if (score<=89) {alert ("良好 ");} 
else{alert ("优秀 ") ;} 
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时 

</script> 

罗 为 判断 按钮 添加 单 击 (onclick) 事件 ， 调 用 计算 (Verdict) 函数 。 将 HTML 文件 中 
“<input type="button" value=" 判 ” 断 ">” 这 一 行 代码 修改 成 如 下 代码 。 


<input type="button" value=" 判 . 断 " onclick="Verdict()"> 

4. switch 分 支 结构 语句 

switch 语句 与 耻 语 句 类 似 , 也 是 选择 结构 的 一 种 形式 , 一 个 switch 语句 可 以 处 理 多 个 判断 
条 件 。 一 个 switch 语句 相当 于 一 个 直 ..else 嵌 套 语句 , 因此 它们 相似 度 很 高 , 几乎 所 有 的 switch 
语句 都 能 用 让..else 堪 套 语句 表示 。 它 们 之 间 最 大 的 区 别 在 于 : 站 .else 嵌 套 语句 中 的 条 件 表达 
式 是 一 个 逻辑 表达 的 值 ， 即 结果 为 tue 或 false， 而 switch 语句 后 的 表达 式 值 为 整 型 、 字 符 型 或 
字符 串 型 并 与 case 标签 里 的 值 进行 比较 。switch 语句 的 表示 形式 如 下 : 


switch (表达 式 ) 

{ 

case 常量 表达 式 1 :语句 块 1; break; 
case 常量 表达 式 2 :语句 块 2; break; 


a 常量 表达 式 n :语句 块 n; break; 

[default :语句 块 n+1;break;] 

} 

首先 计算 表达 的 值 ， 当 表达 式 的 值 等 于 常量 表达 式 1 的 值 时 ， 执 行 语句 块 1， 当 表达 式 的 
值 等 于 常量 表达 式 2 的 值 时 ， 执 行 语句 块 2，...; 当 表 达 式 的 值 等 于 常量 表达 式 n 的 值 时 ， 执 
行 语句 块 n， 否 则 执行 default 后 面 的 语句 块 a+1， 当 执行 到 break 语句 时 跳出 switch 结构 。 


(1) switch 关键 字 后 的 表达 式 结果 只 能 为 整 型 、 字 符 型 或 字符 串 类 型 。 
(2) case 标记 后 的 值 必须 为 常量 表达 式 ， 不 能 使 用 变量 。 
(3) case 和 default 标记 后 以 冒号 而 非 分 号 结束 。 
(4) case 标记 后 的 语句 块 ， 无 论 是 一 句 还 是 多 句 ， 大 括号 f} 都 可 以 省 略 。 
(5) default 标记 可 以 省 略 ， 甚 至 可 以 把 default 子 句 放 在 最 前 面 。 
(6) break 语句 为 必 选 项 ， 如 果 没 有 break 语句 ， 程 序 会 执行 满足 条 件 case 后 的 所 有 语句 ， 
达 不 到 多 选 一 的 效果 ， 因 此 ， 建 议 不 要 省 略 break。 


【 例 12-3】 修 改 【 例 12-2】， 使 用 switch 语句 实现 。 
操作 步骤 请 参阅 【 例 12-2】， 将 判断 函数 修改 为 如 下 代码 。 


<script> 
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function Verdict(){ 
var Score=parseInt (document .myForm.txtScore.value/10) ; // 将 输入 的 成 绩 
除 以 10 取 整 ， 以 缩小 判断 范围 
Switch (Score){ 
case 10: 
case 9:alert ("优秀 ") ;break; 
case 8:alert ("良好 ") ;break; 
case 7:alert ("中 等 "); preak; 
case 6:alert ("及 格 ") ;break; 
default:alert ("不 及 格 ") ;break; 
} 
} 
</script> 


【 例 12.3】 比 【 例 12.2】 代码 清 晰 明了 ， 但 是 switch 比较 适合 做 枚 举 值 ， 不 能 直接 表示 某 
个 范围 ， 如 果 希 望 表示 范围 使 用 站 语句 比较 方便 。 


12.3.3 ”循环 语句 

在 实际 应 用 中 ,往往 会 遇 到 一 行 或 几 行 代码 需要 执行 多 次 的 情况 。 例 如 ， 判 断 一 个 数 是 否 
为 素数 ， 就 需要 从 2 到 比 它 本 身 小 1 的 数 反复 求 余 。 几 乎 所 有 的 程序 都 包含 循环 ， 循 环 是 一 组 
重复 执行 的 指令 ， 重 复 次 数 由 条 件 决 定 。 其 中 给 定 的 条 件 称 为 循环 条 件 ， 反 复 执行 的 程序 段 称 
为 循环 体 。 要 保证 一 个 正常 的 循环 ， 必 须 有 以 下 四 个 基本 要 素 : 循环 变量 初始 化 、 循 环 条 件 、 
循环 体 和 改变 循环 变量 的 值 。JavaScript 语言 提供 了 以 下 语句 实现 循环 : while 语句 、do...while 
语句 、for 语句 、foreach 语句 等 。 

1. while 语句 

while 循环 语句 根据 循环 条 件 的 返回 值 来 判断 执行 零 次 或 多 次 循环 体 。 当 逻辑 条 件 成 立时 ， 
重复 执行 循环 体 ， 直 到 条 件 不 成 立时 终止 。 因 此 在 循环 次 数 不 固定 时 ，while 语句 相当 有 效 。 
while 循环 语句 表示 形式 如 下 : 

while (布尔 表达 式 ) 

{ 

语句 块 ; 

当 遇 到 while 语句 时 ， 首 先 计算 布尔 表达 式 ， 当 布尔 表达 式 的 值 为 true 时 ， 执 行 一 次 循环 
体 中 的 语句 块 ， 循 环 体 中 的 语句 块 执 行 完毕 时 ， 将 重新 查看 是 否 符合 条 件 ， 若 表达 式 的 值 还 返 
回 true 将 再 次 执行 相同 的 代码 ， 否 则 跳出 循环 。while 循环 语句 的 特点 : 先 判断 条 件 ， 后 执行 
语句 。 

对 于 while 语句 循环 变量 初始 化 应 放 在 while 语句 之 上 , 循环 条 件 即 while 关键 字 后 的 布尔 
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表达 式 ， 循 环 体 是 大 括号 内 的 语句 块 ， 其 中 改变 循环 变量 的 值 也 是 循环 体 中 的 一 部 分 。 
【 例 12.4】 设计 程序 ， 实 现 100 以 内 的 自然 数 求 和 ， 即 1+2+3+...+100。 网 页 预览 效果 如 
图 12-8 所 示 。 


- OO x 
站 ”Di\ 本 书 源 代码 \code 六 图 7 人 
大 while 语 句 实现 100 以 内 下 .x LY 


请 当 百 度 一 下 ,你 襄 知 道 


1+2+3+...+100=5050 


图 12-8 程序 运行 结果 
新 建 HTML 文件 ， 并 输入 JavaScript 代码 ， 文 档 结 构 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"/> 
<title>while 语 句 实现 100 以 内 正 整数 之 和 </title> 
<script> 
var i=1,sum =0; // 声 明 变量 1 和 sum 
while (i<=100) 
{ 
sumt+=i; 
生 
} 
document .write ("1+2+3+...+100="+sum) ; // 向 页 面 输入 运算 结果 
</script> 
</head> 
<body> 
</body> 
</html> 


2. do...while 语句 

do...while 语句 和 while 语句 的 相似 度 很 高 ， 只 是 考虑 问题 的 角度 不 同 。while 语句 是 先 判 
断 循环 条 件 , 然后 执行 循环 体 .do...while 语句 则 是 先 执 行 循 环 体 ,然后 判断 循环 条 件 。do...while 
和 while 就 好 比 是 两 个 不 同 的 餐厅 吃饭 , 一 个 餐厅 是 先 付款 后 吃饭 , 一 个 餐厅 是 先 吃饭 后 付款 。 
do...while 语句 的 语法 格式 如 下 : 

do 


El 
语句 块 ; 


} 
while (布尔 表达 式 ) ; 
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程序 遇 到 关键 字 do， 执 行 大 括号 内 的 语句 块 ， 语 句 块 执行 完毕 ， 执 行 while 关键 字 后 的 布 
尔 表达 式 ， 如 果 表 达 式 的 返回 值 为 tue， 就 向 上 执行 语句 块 ， 否 则 结束 循环 ， 执 行 while 关键 
字 后 的 程序 代码 。 

do...while 语句 和 while 语句 的 最 主要 区 别 : 


(1) do...while 语句 是 先 执行 循环 体 后 判断 循环 条 件 ，while 语句 是 先 判断 循环 条 件 后 执 
行 循环 体 。 
(2) 语句 的 最 小 执行 次 数 为 1 次 ，while 语句 的 最 小 执行 次 数 为 0 次 。 
【 例 12.5】 利 用 do.…while 循环 语句 ， 实 现 【 例 12.4】 的 程序 。 
HTML 文档 部 分 不 再 显示 代码 ， 下 述 代 码 为 JavaScript 部 分 代码 。 


<script> 
var i=1, sum=0; // 声 明 变 量 i 和 sum 


while (i<=100); 
document .write ("1+2+3+...+100="+sum) ; // 向 页 面 输入 运算 结果 
</script> 


3. for 语句 
for 语句 和 while 语句 、do...while 语句 一 样 ， 可 以 循环 重复 执行 一 个 语句 块 ， 直 到 指定 的 
循环 条 件 返 回 值 为 假 。for 语句 的 语法 格式 为 : 

for (表达 式 1 ; 表达 式 2; 表达 式 3) 

语句 块 ; 

@ 表达 式 1 为 赋值 语句 ， 如 果 有 多 个 赋值 语句 可 以 用 过 号 隔 开 ， 形 成 过 号 表达 式 ， 
循环 四 要 素 中 的 循环 变量 初始 化 。 

@ 表达 式 2 为 布尔 型 表达 式 ， 用 于 检测 循环 条 件 是 否 成 立 ， 循 环 四 要 素 中 的 循环 条 
Li 

@ 表达 式 3 为 赋值 表达 式 ， 用 来 更 新 循环 控制 变量 ， 以 保证 循环 能 正常 终止 ,循环 
四 要 素 中 的 改变 循环 变量 的 值 。 


for 语句 的 执行 过 程 如 下 : 
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(1) 首先 计算 表达 式 1， 为 循环 变量 赋 初 值 。 

(2) 计算 表达 式 2, 检查 循环 控制 条 件 , 若 表达 式 2 的 值 为 tue, 则 执行 一 次 循环 体 语 句 ; 
若 为 false， 终 止 循环 。 

(3) 循环 完 一 次 循环 体 语句 后 ， 计 算 表 达 式 3， 对 循环 变量 进行 增 量 或 减 量 操作 ， 再 重 
复 第 2 步 操 作 ， 判 断 是 否 要 继续 循环 ， 执 行 流程 如 图 12-9 所 示 。 


JavaScript 语言 多 许 省 略 for 语 句 中 的 3 个 表达 式 ， 但 两 个 分 号 不 能 省 略 ， 并 保证 在 
EREEE 程序 中 有 起 同样 作用 的 语句 。 


] 


假 (false) 


图 12-9 ”for 语句 流程 图 


【 例 12.6】 利 用 for 循环 语句 ， 实 现 【 例 12.4 程序 。 
HTML 文档 部 分 不 再 显示 代码 ， 下 述 代码 为 JavaScript 部 分 代码 。 
<script> 
Var sum=0; 
for(var i=1;i<=100;i++) 
:i 
sum+=i; 
} 
document .write ("1+2+3+...+100="+sum) ; // 向 页 面 输入 运算 结果 
</script> 
通过 上 述 实例 可 以 发 现 ，while、do...while 语句 和 for 语句 有 很 多 相似 之 处 ， 几 乎 所 有 的 
循环 语句 使 用 这 三 种 语句 都 可 以 互 换 。 


4. foreach 语句 


JavaScript 的 foreach 语句 提供 了 一 种 简单 明了 的 方法 循环 访问 数组 或 集合 的 元 素 ， 又 称 为 
迁 代 器 ， 这 里 不 对 其 做 讲解 ， 数 组 部 分 会 详细 介绍 。 
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12.4 函数 


函数 是 执行 特定 任务 的 语句 块 ， 通 过 调用 函数 的 方式 可 以 让 这 些 语句 块 反复 执行 。 本 节 将 
讲述 函数 的 定义 、 使 用 及 系统 函数 的 功能 与 使 用 方法 。 


12.4.1 函数 简介 

在 例 12-6 中 ， 预 览 网 页 直接 会 在 页 面 输出 计算 结果 。 试 想 一 个 问题 ， 如 果 期 望 单 击 【 显 
示 】 按 钮 时 才 显示 计算 结果 ， 这 样 的 问题 该 如 何 解决 呢 ? 解决 这 个 问题 可 以 采用 函数 ， 将 计算 
代码 写 在 函数 内 ， 当 触发 【显示 】 按 钮 的 单 击 事件 时 调用 函数 。 

其 实在 前 面 的 示例 中 已 经 接触 到 了 函数 ， 对 象 触发 事件 时 一 般 都 是 执行 的 函数 。 

所 谓 函 数 ， 是 指 在 程序 设计 中 可 以 将 一 段 经 常 使 用 的 代码 “封装 ”起 来 ， 在 需要 时 直接 调 
用 。JavaScript 中 可 以 使 用 函数 来 响应 网 页 中 的 事件 。 函 数 有 很 多 种 分 类 方法 ， 常 用 的 分 类 方 
法 有 以 下 几 种 。 

@ 。 按 参 数 个 数 划 分 : 有 参数 函数 和 无 参数 函数 。 

@ 。” 按 返回 值 划分 : 有 返回 值 函数 和 无 返回 值 孙 数 。 

@ 。 按 编 写 函 数 的 对 象 划分 : 预定 义 函 数 ( 系统 函数 ) 和 自 定 义 函 数 。 


综 上 所 述 ， 函 数 有 以 下 几 个 优点 。 


@。 代码 灵活 性 较 强 。 通 过 传递 不 同 的 参数 ， 可 以 让 函数 应 用 更 广泛 。 例如， 在 对 两 
个 数据 进行 运算 时 ， 运 算 结果 取决 于 运算 符 ， 如 果 把 运算 符 当 作 参 数 ， 那 么 不 同 
的 用 户 在 使 用 函数 时 ， 只 需要 给 定 不 同 的 运算 符 ， 都 能 得 到 自己 想 要 的 结果 。 
@ ”代码 利用 性 强 。 函 数 一 旦 定义 ， 任 何 地 方 都 可 以 调用 ， 而 无 须 再 次 编写 。 
@ ”响应 网 页 事件 。JavaScript 中 的 事件 模型 主要 通过 函数 和 事件 配合 使 用 。 
12.4.2 ”定义 函数 
使 用 函数 前 ， 必 须 先 定 义 函数 ， 定 义 函数 使 用 关键 字 function。 在 JavaScript 中 ， 定 义 函 
数 常 用 的 方法 有 以 下 两 种 。 
1. 不 指定 函数 名 
函数 其 实 就 是 语句 的 集体 ， 即 语句 块 ， 通 过 前 面 的 学 习 ， 读 者 了 解 到 ， 读 句 块 就 是 把 一 个 
语句 或 多 个 语句 使 用 一 对 大 括号 包 训 , 即 构成 语句 块 。 对 于 无 函数 名 的 函数 定义 函数 非常 简单 ， 
只 需要 使 用 关键 字 function 和 可 选 参数 ， 后 面 跟 一 对 大 括号 ， 大 括号 内 的 语句 称 为 函数 体 ， 语 
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法 格式 如 下 : 


function ( [参数 1, 参数 2..] ) { 
// 函 数 体 语句 
} 
细心 的 读者 会 发 现 ， 上 面 的 语句 在 定义 函数 时 没有 给 函数 命名 (没有 函数 名 ) ， 这 样 的 语 
法 是 不 能 直接 写成 JavaScript 代码 的 。 对 于 不 指明 函数 名 的 函数 ， 一 般 应 用 在 下 面 的 场合 。 


(1) 把 函数 直接 赋值 给 变量 

var myFun=function ([ 参 数 1, 参 数 2..] ) { 
// 函 数 体 语句 

] 7 


其 中 ， 变 量 myFun 将 作为 函数 的 名 字 ， 这 种 方法 的 本 质 是 把 函数 当 作 数据 赋值 给 变量 ， 
正如 前 面 所 说 的 ， 函 数 是 一 种 复合 数据 类 型 。 把 函数 直接 赋值 给 变量 的 代码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title> 函 数 直接 赋值 给 变量 </title> 
<script> 

var myFun=function(){ 


document .write ("这 是 一 个 没有 函数 名 的 函数 ") 


二 
// 执 行 函数 
myFun(); 
</script> 
</head> 
<body> 
</body> 
</html> 


(2) 网 页 事件 直接 调用 函数 

window.onload= function ( [参数 1, 参数 2..] ) { 
// 函 数 体 语句 

}; 


其 中 ，window.onload 是 指 网 页 加 载 时 触发 的 事件 ， 即 加 载 网 页 时 将 执行 后 面 函 数 中 的 代 
码 ， 但 这 种 方法 的 明显 缺陷 是 函数 不 能 反复 使 用 。 

定义 函数 时 ， 不 指定 函数 名 这 种 方法 比较 简单 ， 一 般 适 应 于 网 页 事件 直接 调用 函数 。 

2. 指定 函数 名 

指定 函数 名 定义 函数 是 应 用 最 广泛 、 最 常用 的 方法 ， 语 法 格式 如 下 : 
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function 函数 名 ( [参数 1, 参数 2..] ) { 


// 函 数 体 语句 


[return 表达 式 ] 


3 


说 明 : 


function 为 关键 字 ， 在 此 用 来 定义 函数 。 


函数 名 必须 是 唯一 的 ， 要 通俗 易 懂 ， 最 好 能 看 名 知 意 。 


[] 括 起 来 的 是 可 选 部 分 ， 可 有 可 无 。 
可 以 使 用 retum 将 值 返回 。 


参数 是 可 选 的 ， 可 以 一 个 参数 不 带 ， 也 可 以 带 多 个 参数 ， 多 个 参数 之 间 用 喜 号 隔 


开 。 即 使 不 带 参数 也 要 在 方法 名 后 加 一 对 圆 括号 。 


(1) 函数 参数 的 使 用 
函数 的 参数 主要 是 为 了 提高 函数 的 灵活 性 和 可 重用 性 。 在 定义 函数 方法 时 ， 函 数 名 后 面 的 


圆 括号 中 的 变量 名 称 为 “ 形 参 ”; 在 使 用 函数 时 ， 函 数 名 后 面 圆 括号 中 的 表达 式 称 为 “ 实 参 ”。 


由 此 可 知 ， 形 参 和 实 参 都 是 函数 的 参数 。 它 们 的 区 别 是 一 个 表示 声明 时 的 参数 ， 相 当 于 定义 的 
变量 ， 另 一 个 表示 调用 时 的 参数 。 调 用 带 参数 函数 时 ， 实 现 了 实 参 为 形 参 赋值 的 过 程 。 
关于 形 参与 实 参 的 几 点 注意 事项 如 下 : 


@ 在 未 调用 函数 时 ， 形 参 并 不 占用 存储 单元 。 只 有 在 发 生 方法 调用 时 ， 才 会 给 函数 
中 的 形 参 分 配 内 存单 元 。 在 调用 结束 后 ， 形 参 所 占 的 内 存单 元 也 自动 释放 。 


@ 实 参 可 以 是 常量 、 变 量 或 表达 式 ; 形 参 必 须 是 声明 的 变量 ， 由 于 JavaScript 是 弱 
类 型 语言 ， 所 以 不 需要 指定 类 型 。 

@ 在 函数 调用 中 ， 实 参 列 表 中 参数 的 数量 、 类 型 和 顺序 与 形 参 列表 中 的 参数 可 以 不 
匹配 ， 如 果 形 参 个 数 大 于 实 参 个 数 ， 那 么 多 出 的 形 参 值 为 undefined， 反 之 ， 多 出 
的 实 参 将 忽略 。 

@ 。 实 参 对 形 参 的 数据 传递 是 单 向 传递 ， 即 只 能 由 实 参 传 给 形 参 ， 而 不 能 由 形 参 传 回 
给 实 参 。 

(2) 函数 返回 值 


如 果 希 望 函数 执行 完毕 后 返回 一 个 值 给 调用 函数 者 ， 可 以 使 用 return 语句 。 如 果 函 数 没 有 


使 用 retum 语句 返回 


return [返回 值 ] 


一 个 值 ， 那 么 默认 返回 undefined。 当 程序 执行 到 return 语句 时 ， 将 会 结束 
函数 ， 因 此 retum 语句 一 般 都 位 于 函数 体内 的 最 后 一 行 。return 语句 的 格式 如 下 : 
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retum 语句 中 的 返回 值 可 以 是 常量 、 变 量 、 表 达 式 等 ， 并 且 类 型 可 以 是 前 面 介 绍 的 任意 类 
型 。 如 果 省 略 返 回 值 ， 就 代表 结束 函数 。 


【 例 12.7】 编 写 函 数 calcF ， 实 现 输入 一 个 值 ， 计 算 其 一 元 二 次 方程 式 的 结果 。 
f(x)=4x2+3x+2， 单 击 【 计 算 】 按 钮 ， 使 用 户 通过 提示 对 话 框 输入 x 的 值 ， 在 对 话 框 中 显示 相应 
的 计算 结果 ， 如 图 12-10、 图 12-11 和 图 12-12 所 示 。 


过 口 x Explorer 用 户 提示 x 来 自 网 页 的 消息 


超 。 D:\ 本 书 源 代 码 \code\ 沪 
< | we | 
唇 计算 一 元 二 次 方程 函数 x| 人 计算 结果 : 432 
取消 


请 输入 一 个 数值 : 
间 当 百 度 一 下 ,你 就 知道 


计算 10 


图 12-10 ”加载 网 页 效果 图 12-11 单 击 【计算 】 按钮 图 12-12 显示 计算 结果 


具体 操作 步骤 如 下 : 


L 畏 创建 HTML 文档， 结构 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title> 计 算 一 元 二 次 方程 函数 </title> 
</head> 

<body> 

<input type="button" value=" 计 算 "> 
</body> 

</html> 


iog 在 HTML 文档 的 head 部 分 增加 如 下 JavaScript 代码 。 


<script> 

function calcF (x){ 
var result; // 声 明 变量 ， 存 储 计算 结 果 
result=4*x*x+3*X+2; // 计 算 一 元 二 次 方程 值 
alert ("计算 结果 : "+result);  ”// 输 出 运算 结果 

/serine> 


it@ 旨 为 计算 判断 按钮 添加 单 击 (onclick) 事件 ， 调 用 计算 (calcF) 函数 。 将 HTML 文件 
中 “<input type="button" value=" 计 算 ">” 这 一 行 代码 修改 成 如 下 代码 。 


<input type="button" value=" 计 算 " onclick="calcF (prompt (' 请 输入 一 个 数值 : 


JavaScript 语言 基础 第 12 齐 


7 ) "> 


本 例 主要 用 到 了 参数 ， 增 加 了 参数 之 后 ， 就 可 以 计算 任意 数 的 一 元 二 次 方程 值 。 试 想 ， 如 


果 没 有 该 参数 ， 函 数 的 功能 将 会 非常 单一 。 prompt 方法 是 系统 内 置 的 一 个 调用 输入 对 话 框 的 方 


法 ， 


该 方法 可 以 带 参数 ， 也 可 以 不 带 参 数 ， 详 见 window 对 象 部 分 。 


12.4.3 ”调用 函数 


定义 函数 的 目的 是 为 了 后 续 的 代码 中 使 用 函数 。 函 数 自己 不 会 执行 ， 必 须 被 调用 函数 体内 


的 代码 才 会 执行 。 在 JavaScript 中 调用 函数 的 方法 有 直接 调用 、 在 表达 式 中 调用 、 在 事件 中 调 
用 和 其 他 函数 调用 4 种。 


区 


算 。 


1. 直接 调用 
直接 调用 函数 的 方式 一 般 比 较 适 合 没有 返回 值 的 函数 。 此 时 相当 于 执行 函数 中 的 语句 集 


。 直 接 调用 函数 的 语法 格式 如 下 : 


函数 名 ([ 实 参 1, .…] ) 


调用 函数 时 的 参数 取决 于 定义 该 函数 时 的 参数 , 如 果 定 义 时 有 参数 , 此 时 就 需要 增加 实 参 。 
如 果 希 望 例 12-7 在 加 载 页 面 时 就 开始 计算 ， 可 以 修改 成 如 下 代码 〈 注 意 加 粗 部 分 代码 ) 。 


<script> 

function calcF (x){ 
var result; // 声 明 变量 ， 存 储 计算 结 果 
result=4*x*x+3*x+2; // 计 算 一 元 二 次 方程 值 
alert ("计算 结果 : "+result);  ”// 输 出 运算 结果 

} 

var inValue=prompt (' 请 输入 一 个 数值 :' ) 

calcF (inValue); 

</script> 


2. 在 表达 式 中 调用 
在 表达 式 中 调用 函数 的 方式 一 般 比较 适合 有 返回 值 的 函数 , 函数 的 返回 值 参 与 表达 式 的 计 
通常 该 方式 还 会 和 输出 〈alert、document 等 ) 语句 配合 使 用 (如 下 代码 所 示 ) ， 注 意 加 粗 


部 分 代码 。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 在 表达 式 中 使 用 函数 </title> 
<script> 


// 函 数 isLeapYear 判 断 给 定 的 年 份 是 否 为 六 年 ， 如 果 是 返回 指定 年 份 为 头 年 的 字符 串 ， 否 则 返回 
// 平 年 字符 串 
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function isLeapYear (Year) 1{ 
// 判 断 关 年 的 条 件 
ifE(yeargs4==0&&Yearsl001!=011years400==0) 
{ 
return year+" 年 是 头 年 "; 
} 
else 
{ 
return year+" 年 是 平年 "; 
} 
} 
document .write (isLeapYear (2018)); 
</script> 
</head> 
<body> 
</body> 
</html> 


3. 在 事件 中 调用 

JavaScript 是 基于 事件 模型 的 程序 语言 ， 页 面 加 载 、 用 户 单 击 、 移 动 光标 都 会 产生 事件 。 
当 事 件 产 生 时 ，JavaScript 可 以 调用 某 个 函数 来 响应 这 个 事件 。 在 事件 中 调用 函数 的 方法 如 下 
代码 所 示 。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 在 表达 式 中 使 用 函数 </title> 
<script> 
function showHello() 
{ 
var count=document .myForm.txtCount.value; // 文 档 框 中 输入 的 显示 次 数 
for (i=0;i<count;i++) { 
document .write ("<H2>HelloWorld</H2>"); // 按 指定 次 数 输出 HelloWworld 
} 
} 
</script> 
</head> 
<body> 
<form name="myForm"> 
<input type="text" name="txtCount"/> 
<input type="submit" name="Submit" value=" 显 示 HelloWorld" 
onclick="showHello()"> 
</form> 
</body> 
</html> 
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4. 其 他 函数 调用 

所 谓 其 他 函数 的 调用 ， 是 指 在 一 个 函数 中 执行 另外 一 个 函数 。 例 如 ， 现 有 A 函数 和 B 函 
数 ， 在 A 函数 的 函数 体内 通过 上 述 第 1 种 或 第 2 种 方法 之 一 执行 函数 B。 注 意 A 函数 必须 通 
过 上 述 三 种 方法 之 一 执行 ， 整 个 函数 才 会 执行 。 


12.4.4 系统 函数 


JavaScript 中 除了 自 定义 函数 之 外 ,系统 还 内 置 了 很 多 常用 的 函数 , 这些 函数 可 借 JavaScript 
程序 直接 调用 。 有 面向 对 象 编程 经 验 的 读者 会 让 函数 和 方法 搞 得 一 头 雾 水 ， 在 完全 面向 对 象 编 
程 的 语言 中 几乎 已 经 没有 函数 的 概念 了 。JavaScript 是 一 种 基于 面 对 象 的 脚本 编程 语言 ， 会 同 
时 存在 函数 和 方法 两 个 概念 ,为 了 帮助 读者 理解 ， 在 此 为 大 家 讲述 一 个 窍门 ， 在 JavaScript 中 ， 
函数 一 般 都 是 指 自 定义 函数 或 者 是 系统 的 全 局 函数 ， 一 般 对 象 内 的 称 为 方法 。 函 数 和 方法 在 使 
用 上 的 唯一 区 别 是 ， 函 数 不 需 要 指定 对 象 ， 而 方法 需要 采用 对 象 .方法 的 格式 。 常 用 的 系统 函数 
(全 局 函数 ) 如 表 12-10 所 示 。 


表 12-10 常用 的 系统 函数 


计算 Javaseript 字符 叫 ， 并 把 它 作为 脚本 代码 来 执行 


Number( 参 数 ) 将 参数 转换 成 数值 
String( 参 数 ) 将 参数 转换 成 字符 串 
1. eval() 
eval0 函 数 , 参数 为 String 类 型 文本 , 主要 功能 是 计算 某 个 字符 串 , 并 执行 其 中 的 JavaScript 
代码 。 
例如 ， 使 用 下 述 代 码 计算 字符 。 


document .write (eval ("12+2")) // 输 出 14 
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注意 : 参数 必须 是 String 类 型 的 ， 否 则 该 方法 将 不 做 任何 改变 地 返回 。 
2. isFinite() 


isFinite() 函 数 ， 参数 是 数值 类 型 ,主要 功能 是 检查 其 参数 是 否 为 有 穷 大 。 如果 number 是 有 
限 数值 〈 或 可 转换 为 有 限 数值 ) ， 就 返回 tue; 如 果 number 是 NaN 〈 非 数字 ) ， 或 者 是 正 、 


负 无 穷 大 的 数 ， 就 返回 false。 
例如 ， 下 述 代码 检查 给 定 参数 是 否 为 有 穷 大 。 
isFinite(-125) // 返回 true 
isFinite(1.2) // 返回 true 


isFinite(' 易 水 寒 ') // 返回 false 
isFinite('2011-3-11') // 返 回 false 


3.isNaN() 
isNaNO0 函 数 ， 参 数 无 限制 ， 主 要 功能 是 检查 其 参数 是 否 是 非 数 字 值 。 
例如 ， 下 述 代码 检查 给 定 参数 是 否 为 非 数字 值 。 


isNaN (12) // 返 回 false 
isNaN (0) // 返 回 false 
isNaN (" 易 水 寒 ") ”// 返 回 true 
isNaN ("100") // 返 回 true 


注意 : 可 以 用 isNaNO 函 数 来 检测 算数 错误 ， 比 如 用 0 作为 除数 的 情况 。 
4. Number() 


避 | 


Number0 函 数 ， 参 数 无 限制 ， 主 要 功能 是 把 对 象 的 值 转换 为 数字 。 如 果 参 数 是 Date 对 象 ， 
Number0 返 回 从 1970 年 1 月 1 日 至 今 的 毫秒 数 。 如 果 对 象 的 值 无 法 转换 为 数字 , 那么 Number0 


函数 返回 NaN。 
例如 ， 下 述 代码 实现 各 种 类 型 到 数值 型 的 转换 。 


Var testl= new Boolean (true) 

Var test2= new Boolean (false); 

Var test3= new Date () 7 

Var test4= new String("999") 7 

Var test5= new String("999 888") 7 

document .write (Number (test1));  // 输 出 1 

document .write (Number (test2));  // 输 出 0 
document .write (Number (test3));  // 输 出 1256657776588 
document .write (Number (test4));  // 输 出 999 

document .write (Number (test5));  // 输 出 NaN 


5. parselnt() 


parseInt0 函 数 ， 参 数 可 以 是 任何 值 ， 但 一 般 要 求 为 数字 字符 串 才 有 意义 。 函 数 的 功能 是 将 
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一 个 字符 串 转 换 成 数值 ， 转 换 成 功 就 返回 一 个 整数 ， 否 则 返回 NaN。 函 数 在 转换 过 程 中 遇 到 第 
一 个 非 数 字 时 终止 转换 ， 因 此 ， 只 要 字符 串 中 的 第 一 字符 为 数字 ， 即 可 成 功 转换 。 
例如 ， 下 述 代 码 将 字符 串 转换 成 整数 。 


document . 
document - 
document. 


write ("123"); // 输 出 数值 123 
write("9y8");  // 输 出 9 
write (hl123);  // 输 出 NaN 


6. parseFloat() 

parseFloat0 函 数 ， 参 数 可 以 是 任何 值 ， 但 一 般 要 求 为 数字 字符 串 才 有 意义 。 函 数 的 功能 是 
将 一 个 字符 串 转换 成 浮 点 数 〈 含 小 数 数值 ) ， 转 换 成 功 就 返回 一 个 浮 点 数 ， 否 则 返回 NaN。 函 
数 在 转换 过 程 中 遇 到 第 一 个 非 数字 时 终止 转换 ， 因 此 ， 只 要 字符 串 中 的 第 一 字符 为 数字 ， 即 可 


成 功 转换 。 


例如 ， 下 述 代 码 将 字符 串 转换 成 浮 点 数 。 


document 


document. 
document. 
document. 
document. 
document. 
document. 


.write (parseFloat ("10")) // 输 出 10 


write (parseFloat ("10.00")) // 输 出 10 
write (parseFloat ("10.33")) // 输 出 10.33 
write(parseFloat ("34 45 66")) // 输 出 34 
write(parseFloat(" 60 ")) // 输 出 60 
write (parseFloat ("40 years")) // 输 出 40 
write (parseFloat ("He was 40")) // 输 出 NaN 


7. decodeURI() 
decodeURI 0 函数 ， 参 数 为 String 类 型 文本 ， 主 要 功能 是 对 encodeURIO 函 数 编码 过 的 URI 


进行 解码 。 


例如 ， 下 述 代码 使 用 “错误 ! 链 接 无 效 ”解析 字符 串 。 


document. 


write (错误 ! 链 接 无 效 。"http://www.jb51.net/My%20first/")); 


// 输 出 http://www.jb51.net/MY first/ 


8. decodeURIComponent () 

decodeURIComponentO 函数 ， 参 数 为 Sting 类 型 文本 ， 主 要 功能 是 对 用 
encodeURIComponent() 函数 编码 的 URI 进行 解码 。 

9. encodeURI() 

encodeURI() 函 数 ， 参 数 为 String 类 型 文本 ， 主 要 功能 是 把 字符 串 作 为 URI 进行 编码 。 

提示 : 如 果 URI 组 件 中 含有 分 隔 符 ， 比 如 ?和 #， 就 应 当 使 用 encodeURIComponent( 方 法 
分 别 对 各 组 件 进行 编码 。 
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10. encodeURIComponent() 

encodeURIComponent0 函 数 的 功能 是 把 字符 串 作为 URI 组 件 进行 编码 。 

注意 : encodeURIComponent0 函 数 与 encodeURIO 函 数 的 区 别 是 , 前 者 假定 它 的 参数 是 URI 
的 一 部 分 (比如 协议 、 主 机 名 、 路 径 或 查询 字符 串 )。 因 此 encodeURIComponentO 函 数 将 转 义 
用 于 分 隔 URI 各 个 部 分 的 标点 符号 。 


11. escape() 
escape() 函 数 ， 参 数 为 String 类 型 文本 ， 主 要 功能 是 对 字符 串 进行 编码 ， 这 样 就 可 以 在 所 
有 的 计算 机 上 读 取 该 字符 串 。 该 方法 不 会 对 ASCI 字母 和 数字 进行 编码 ， 也 不 会 对 - _.! ~*' 


()ASCI 标点 符号 进行 编码 ， 其 他 所 有 的 字符 都 会 被 转 义 序列 蔡 换 。 

注意 : ECMAScript v3 反对 使 用 该 方法 ， 应 该 使 用 decodeURIO 和 decodeURIComponent() 
替代 。 

12. unescape() 

unescape() 函 数 ， 参 数 为 String 类 型 文本 ， 主 要 功能 是 对 通过 escape0 编 码 的 字符 串 进行 解 
码 。 该 函数 的 工作 原理 是 : 通过 找到 形式 为 "xx 和 %uxxxx 的 字符 序列 (x 表示 十 六 进 制 的 数 
字 ) ， 用 Unicode 字符 \u00xx 和 \uxxxx 蔡 换 这 样 的 字符 序列 进行 解码 。 

温 贡 提示: ECMAScript v3 已 从 标准 中 删除 了 unescapeO 函 数 ， 并 反对 使 用 它 ， 因 此 应 该 
用 decodeURIO 和 decodeURIComponent0 取 而 代 之 。 


12.5 综合 实例 一 一 购物 简易 计算 器 


实现 如 图 12-13 所 示 的 效果 ， 编 写 具 有 能 对 两 个 操作 数 进行 加 、 减 、 乘 、 除 运算 功能 的 简 
易 计 算 器 (加 运算 效果 如 图 12-14 所 示 ， 除 运算 效果 如 图 12-15 所 示 ) 。 本 例 中 涉及 本 章 所 学 
的 数据 类 型 、 变 量 、 流 程控 制 语句 、 函 数 等 知识 。 请 读者 注意 ， 该 实例 中 还 涉及 少量 后 续 章节 
的 知识 ， 如 事件 模型 。 不 过 ， 前 面 的 案例 中 也 有 使 用 ， 请 读者 先 掌握 其 用 法 ， 详 见 对 象 部 分 。 
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图 12-13 程序 效果 图 图 12-14 ”加 法 运算 


有 具体 操作 步骤 如 下 : 
1 到 新 建 HTML 文档 ， 输 入 代码 如 下 所 示 。 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"/> 

<title> 购 物 简易 计算 器 </title> 

<style> 

/* 定 义 计算 器 块 信息 */ 

sectiont{ 
background-color:#C9E495; 
width:260px; 
height:320px; 
text-align:center; 
padding-top:1px; 

} 

/* 细 边框 的 文本 输入 框 */ 

.textBaroder 

{ 
border-width:1px; 
border-style:solid; 


</STYLE> 
</head> 
<body> 
<section> 


图 12-15 ”除法 运算 


<hl><img src="images/1l0go.gif" width="240" height="31" > 欢迎 您 来 淘宝 ! </h1> 


精通 HTML54CS53+JavaScript 网 页 设计 〈 视 频 教学 版 ) (第 2 版) 


<form action="" method="post" name="myform" id="myform"> 
<h3><img src="images/shop.gif" width="54" height="54"> 购 物 简 易 计 算 器 </h3> 
<p> 第 一 个 数 <input name="txtNuml" type="text" class="textBaroder" 
id="txtNuml" size="25"></p> 
<p> 第 二 个 数 <input name="txtNum2" type="text" class="textBaroder" 
id="txtNum2" size="25"></p> 
<p><input name="addButton2" type="button" id="addButton2" value=" + " 
onclick="compute('+')"> 


<input name="subButton2" type="button" id="subButton2" value=" - "> 
<input name="mulButton2" type="button" id="mulButton2" value=" x "> 
<input name="divButton2" type="button" id="divButton2" value=" 二 "> 


<p> 计 算 结 果 <INPUT name="txtResult" type="text" class="textBaroder" 
id="txtResult" size="25"></p> 

</form> 

</section> 

</body> 


ti 到 保存 HTML 文件 ， 选 择 相 应 的 保存 位 置 ， 文 件 名 为 “综合 实例 一 一 购物 简易 计算 
器 .html 。 
i@ 旨 在 HIML 文档 的 head 部 分 ， 输 入 如 下 代码 。 


<script> 
function compute (op) 
{ 
Var numl,num2; 
numl=parseFloat (document .myform.txtNuml .value); 
num2=parseFloat (document .myform.txtNum2 .Value) 7 
if (op=="+") 
document .myform.txtResult .value=numl+num2; 
Op) 
document .myform.txtResult .value=numl -num2; 
if (op=="#") 
document .myform.txtResult .value=numl*num2; 
if (op=="/" && num2!=0) 
document .myform.txtResult .value=numl /num2; 
1 
</seripe> 


辆 修改 “+ ”按钮 、“-” 按 钮 、“x” 按 钮 、“:” 按 钮 ， 如 下 代码 所 示 。 


<input name="addButton2" type="button" id="addButton2" value=" + " 
onclick="compute('+')"> 

<input name="subButton2" type="button" id="subButton2" value=" — " 
onclick="compute('—')"> 

<input name="mulButton2" type="button" id="mulButton2" value=" x ™" 
onclick="compute ('*')"> 

<input name="divButton2" type="button" id="divButton2" value=" 二 " 
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onclick="compute('/')"> 


[0 加 保存 网 页 ， 然 后 即 可 预览 效果 


12.6 专家 解 惑 


1. 什么 是 弱 类 型 程序 设计 语言 ? 

答 : 弱 类 型 程序 设计 语言 也 称 为 弱 类 型 定义 语言 ， 与 强 类 型 定义 相反 。 像 JavaScript、 VB、 
PHP 等 就 属于 弱 类 型 语言 。 弱 类 型 语言 与 强 类 型 语言 的 主要 区 别 有 以 下 两 点 。 
(1) 弱 类 型 语言 ， 变 量 没有 各 类 之 分 ， 所 有 变量 的 声明 都 用 关键 字 var， 为 变量 赋值 时 会 
自动 判断 类 型 并 进行 转换 ， 强 类 型 语言 ， 变 量 类 型 有 多 种 ， 并 且 变 量 只 能 接受 与 之 相同 的 数据 

变量 间 不 需要 显 式 转换 。 例 如 ， 将 字符 串 12 和 整数 3 进行 相 减 ， 得 到 


类 型 。 
(2) 弱 类 型 语言 ， 
数值 9， 而 不 需要 显 式 转换 。 
2. JavaScript 代码 的 执行 方式 顺序 如 何 ? 
答 : JavaScript 代码 的 执行 次 序 与 书写 次 序 相 同 ， 先 写 的 JavaScript 代码 先 执行 ， 后 写 的 


JavaScript 代码 后 执行 。 执 行 JavaScript 代码 的 方式 有 以 下 三 种 。 


(1) 直接 调用 函数 。 
(2) 在 对 象 事件 中 使 用 JavaScript 调用 JavaScript 程序 。 例 如 ，<input type="button" 


name="Submit" value=" 显 示 HelloWorld" onclick="javascript:alert('1233")">。 
(3) 通过 事件 激发 JavaScript 程序 。 
3. 如 果 浏 览 器 不 支持 JavaScript， 如 何不 影响 网 页 的 美观 ? 
答 : 现在 浏览 器 种 类 、 版 本 繁多 ， 不 同 浏览 器 对 JavaScript 代码 的 支持 度 均 不 一 样 。 为 了 保证 
浏览 器 不 支持 部 分 的 代码 不 影响 网 页 的 美观 ， 可 以 使 用 HTML 注释 语句 将 其 注释 ， 这 样 便 不 会 在 


hb 输出 这 些 代码 。HTML 注释 语句 使 用 “<!--” 符 号 和 “-->” 标 记 JavaScript 代码 。 
4. 函数 Number 和 parselnt 都 可 以 将 字符 串 转换 成 整数 ， 有 何 区 别 ? 
答 : 函数 Number 和 parseInt 都 可 以 将 字符 串 转换 成 整数 ， 它 们 之 间 的 区 别 如 下 : 


网 页 


只 能 


(1) 函数 Number 不 仅 可 以 将 数字 字符 串 转换 成 整数 ， 还 可 以 转换 成 浮 点 数 。 它 的 作用 
将 数字 字符 串 转换 成 整数 。 


是 将 数字 字符 串 直接 转换 成 数值 。 ParseInt 函数 
(2) 函数 Number 在 转换 时 ， 如 果 字 符 串 中 包括 非 数 字 字 符 ， 转 换 将 会 失败 。parseInt 函 


数 只 要 开头 第 1 个 是 数字 字符 即 可 转换 成 功 。 
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JavaScript 是 一 种 基于 对 象 的 编程 语言 , 将 对 象 分 为 JavaScript 内 置 对 象 、 浏 览 器 内 置 对 象 
和 自 定义 对 象 三 种 。 本 章 主要 讲述 常用 JavaScript 内 置 对 象 。 
@ JavaScript 内 置 对 象 : JavaScript 将 一 些 常用 功能 预先 定义 成 对 象 ， 用 户 可 以 直接 
使 用 ， 这 就 是 内 置 对 象 。 
@ 浏览 器 内 置 对 象 : 浏览 器 对 象 是 浏览 器 根据 系统 当前 的 配置 和 所 装载 的 页 面 为 
JavaScript 提供 的 一 些 可 供 使 用 的 对 象 。 
@ 自 定义 对 象 : 自 定 义 对 象 是 指 根据 自己 的 需要 而 定义 的 新 对 象 。 


掌握 对 象 的 使 用 ， 主 要 是 掌握 对 象 如 何 创建 、 对 象 的 属性 和 函数 的 使 用 。 


13.1 字符 串 对 象 


字符 串 类 型 是 JavaScript 中 的 基本 数据 类 型 之 一 。 在 JavaScript 中 ， 可 以 将 字符 串 直 接 看 
成 字符 串 对 象 ， 不 需要 任何 转换 。 在 对 字符 串 对 象 操作 时 ， 不 会 改变 字符 串 中 的 内 容 。 
13.1.1 字符 串 对 象 的 创建 

字符 串 对 象 有 两 种 创建 方法 。 

1. 直接 声明 字符 串 变 量 

通过 前 面 学 习 的 声明 字符 串 变量 方法 把 声明 的 变量 看 作 字 符 串 对 象 ， 语 法 格式 如 下 : 

[var] 字符 串 变 量 = 字符 串 

说 明 : var 是 可 选项 。 例 如 ， 创 建 字符 串 对 象 myString， 并 对 其 赋值 ， 代 码 如 下 : 

Var myString="This is a sample"; 


2. 使 用 new 关键 字 来 创建 字符 串 对 象 
使 用 new 关键 字 创 建 字符 串 对 象 的 方法 如 下 : 
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[var] 字符 串 对 象 =new String( 字 符 串 ) 

说 明 : var 是 可 选项 ， 字 符 串 构造 函数 String0 的 第 一 个 字母 必须 为 大 写字 母 。 

例如 ， 通 过 new 关键 字 创 建 字符 串 对 象 myString， 并 对 其 赋值 ， 代 码 如 下 : 

var myString=new String(“This ls a sample”): 

注意 : 上 述 两 种 语句 效果 是 一 样 的 ， 因此 声明 字符 串 时 可 以 采用 new 关键 字 ， 也 可 以 不 采 
用 new 关键 字 。 


13.1.2 ”字符 串 对 象 的 常用 属性 
字符 串 对 象 的 属性 比较 少 ， 常 用 的 属性 为 length， 字 符 串 对 象 的 属性 见 表 13-1。 
表 13-1 字符 串 对 象 的 属性 及 说 明 


| 


length 字符 串 长 度 


对 象 属性 的 使 用 格式 如 下 所 示 。 


对 象 名 .属性 名 ”// 获 取 对 象 属性 值 
对 象 名 .属性 名 = 值 ”// 为 属性 赋值 


例如 ， 声 字符 串 对 象 myArcticle， 输 出 其 包含 的 字符 个 数 。 


var myRrcticle=" 千 里 始 足下 ,高 山 起 微 尘 , 吾 道 亦 如 此 , 行 之 贵 日 新 。 一 白居易 " 

document .write (myArcticle.length);  // 输 出 字符 串 对 象 字 符 的 个 数 

注意 : 测试 字符 串 长 度 时 ， 空 格 也 占 一 个 字符 位 。 一 个 汉字 占 一 个 字符 位 ， 即 一 个 汉字 长 
度 为 1。 


13.1.3 ”字符 串 对 象 的 常用 函数 

字符 串 对 象 是 内 置 对 象 之 一 ， 也 是 常用 的 对 象 。 在 JavaScript 中 ， 经 常会 在 字符 串 对 象 中 
查找 、 替 换 字 符 。 为 了 方便 操作 ，JavaScript 中 内 置 了 大 量 的 方法 ， 用 户 只 需要 直接 使 用 这 些 
方法 即 可 完成 相应 操作 。 在 JavaScript 中 ， 字 符 串 对 象 常用 函数 如 表 13-2 所 示 。 为 了 方便 ， 示 
例 中 声明 字符 串 对 象 stringObj="HTMLS 从 入 门 到 精通 一 JavaScript 部 分 "， 字 符 串 中 第 0 个 位 
置 的 字符 是 “H”， 第 1 个 位 置 的 字符 是 “T”， 以 此 类 推 。 
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表 13-2 字符 对 象 常用 函数 


subStr( 开 始 位 置 [, 长 
度 ]) 


subString( 开 始 位 置 ， 
结束 位 置 ) 


split([ 分 割 符 ]) 


replace( 需 蔡 代 的 字 
符 串 ， 新 字符 串 ) 


从 字符 串 对 象 指定 的 位 置 开 始 , 按照 
指定 的 数量 截取 字符 , 并 返回 截取 的 
字符 串 

从 字符 串 对 象 指定 的 位 置 开 始 , 截取 
字符 串 至 结束 位 置 , 并 返回 截取 的 字 
分 割 字符 串 到 一 个 数组 中 


在 字符 串 对 象 中 , 将 指定 的 字符 串 蔡 
换 成 新 的 字符 串 


函数 说 明 示例 
charAt (位 置 ) 字 串 对 象 在 指定 位 置 处 的 字符 stringObj.charAt(3)， 结 果 为 “L” 
charCodeAt (位 置 ) | 字符 串 对 象 在 指定 位 置 处 字符 的 stringObj.charAt(3)， 结 果 为 数值 76 
Unicode 值 
indexOf( 要 查找 字符 | 从 字符 串 对 象 的 指定 位 置 开始 , 从 前 | stringObj.indexOf("a")， 结 果 为 13 
串 ，[ 起 始 位 置 ]) 到 后 查找 子 字符 串 在 字 串 对 象 中 的 
位 置 
lastIndexOf( 要 查找 ”| 从 后 到 前 查找 子 字符 串 在 字符 串 对 “| stringObj.indexOf("a")， 结 果 为 15 
字符 串 ) 象 中 的 位 置 


stringObj.substr(2,5), 结果 为 “ML5 从 入 ” 


stringObj.substring(2,5)， 结 果 为 “ML5” 


Var s="good morning evering", 

var b=s.split(" ") 

结果 为 : a[0]= "good",a[1]=" morning", 
a[2]=" evering" 
stringObj.replace("HTML5"," 网 页 设计 ") 
结果 为 “网 页 设计 从 入 门 到 精通 一 JavaScript 
部 分 ” 


toLowerCase() 字符 串 对 象 中 的 字符 变 为 小 写字 母 ”| stringObj.toLowerCase()， 结 果 为 “html5 
从 入 门 到 精通 一 JavaScript 部 分 ” 
toUpperCase() 字符 串 对 象 中 的 字符 变 为 大 写字 母 ”| stringObj.toUpperCase0, 结果 为 ‘HTML5 


从 入 门 到 精通 一 JavaScript 部 分 ” 


【 例 13.1】 设 计 程 序 ， 在 文本 框 中 输入 字符 串 ， 单 击 【检查 】 按 钮 ， 检 查 字 符 串 是 否 为 有 
效 字符 串 (字符 串 是 否 由 大 小 写字 母 、 数 字 、 下 画 线 和- 构成) ， 如 图 13-1 所 示 。 如 果 有 效 ， 
弹出 对 话 框 ， 提 示 “ 你 的 字符 串 合法 ”， 如 图 13-2 所 示 。 如 果 无 效 ， 弹 出 对 话 框 ， 提 示 “ 你 
的 字符 串 不 合法 ”， 如 图 13-3 所 示 。 
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- 0O x : 
生 ”Dr 本 书 源 fEvcode 国 " 上 蛋 “Dr 本 书 源 代 本 codev 国 加 
局 。”D:\ 本 书 源 代 码 vcode\i 图 登 “判断 字符 趾 是否 合 法 x | 登 天 断 字符 下 是 否 全 法 | 
并 判断 字符 串 是 否 合法 x | 启 六- 下 , 人 ri0 诸 EE 下 , tr 
请 洛 百度 一 下 ， 你 就 知道 2 wowme _ [检查 | 
一 一 一 来 自 网 页 的 消 思 x 
[ [检查 


A careras 


图 13-1 判断 字符 串 是 否 合法 图 13-2 输入 合法 字符 串 图 13-3 输入 不 合法 字符 串 
具体 操作 步骤 如 下 : 
国 册 创建 HTML 文件 ， 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<tit1le> 判 断 字符 串 是 否 合法 </title> 

</head> 

<body> 

<form action="" method="post" name="myform" id="myform"> 
<input type="text" name="txtSstring"> 
<input type="button" value=" 检 查 "> 
</form> 

</body> 

</html> 


tog 在 HTML 文件 的 head 部 分 输入 JavaScript 代码 。 


<script> 
function isRight (subChar) 
| 
var findchar="abcdefghijklmnopqrstuvwxyz1234567890 -";// 字 符 串 中 出 现 的 字符 
for (var i=0;i<subChar.length;i++) // 逐 个 判断 字符 串 的 字符 
{ 
if(findchar.indexof (subChar.charAaAt (i))==-1 
// 在 findchar 中 查找 输入 字符 串 中 的 字符 
{ 
alert ("你 的 字符 串 不 合法 ") ; 
return; 
} 
| 
alert ("你 的 字符 串 合法 ") ; 
由 
</script> 
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到 为 “检查 ”按钮 添加 单 击 (onclick) 事件 ， 调 用 计算 (isRight) 函数 。 在 HTML 文 
件 中 ， 将 <input type="button" value=" 检 ， 查 必 这 一 行 代码 修改 成 如 下 代码 : 


<input type="button" value=" 检 ” 查 " onclick="isRight (document .myform.txtString . 
Value) "> 


i@ 细 保存 网 页 ， 浏览 最 终 效果 。 


13.2 数学 对 象 
在 JavaScript 中 ， 通 常会 对 数值 进行 处 理 ， 为 了 便于 操作 ， 内 置 了 大 量 的 属性 函数 。 例 如 ， 
对 数值 求 绝对 值 、 取 整 等 。 
13.2.1 数学 对 象 的 属性 
在 JavaScript 中 ， 用 Math 表示 数学 对 象 。Math 对 象 不 需要 创建 ， 直 接 使 用 。 在 数学 中 有 
很 多 常用 的 常数 ， 比 如 圆周 率 、 自 然 对 数 等 。 在 JavaScript 中 ， 将 这 些 常 用 的 常数 定义 为 数学 
属性 ， 通 过 引用 这 些 属性 取得 数学 常数 。Math 对 象 常用 属性 如 表 13-3 所 示 。 


表 13-3 Math 对 象 常用 属性 


E 欧 拉 常量 ， 自 然 对 数 的 底 约 等 于 2.7183 
LN2 2 的 自然 对 数 约 等 于 0.6931 
LN10 10 的 自然 对 数 约 等 于 2.3026 
LOG2E 以 2 为 底 的 e 的 自然 对 数 约 等 于 1.4427 
LOGI10E 以 10 为 底 的 e 的 自然 对 数 约 等 于 0.4343 
PI n 约 等 于 3.14159 
SQRT1 2 0.5 的 平方 根 约 等 于 0.707 
SQRT2 2 的 平方 根 约 等 于 1.414 


注意 : Math 对 象 的 属性 只 能 读 取 ， 不 能 对 其 赋值 ， 即 只 读 型 属性 ， 并 且 属 性 值 是 固定 的 。 


13.2.2 ”数学 对 象 的 函数 
Math 对 象 的 函数 如 表 13-4 所 示 。 
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表 13-4 Math 对 象 的 函数 


函数 意义 示例 

abs(x) 返回 x 的 绝对 值 Math.abs(-6.8) 的 结果 为 6.8 

acos(x) 返回 某 数 的 反 余弦 值 ( 弧 度 为 单位 ) 。x 在 | Math.acos(0.6) 的 结果 为 

-1 至 1 范围 内 0.9272952180016123 

asin(x) 返回 某 数 的 反正 弦 值 (以 弧度 为 单位 》 Math.asin(0.6) 的 结果 为 
0.6435011087932844 

atan(x) 返回 某 数 的 反正 切 值 ( 以 弧度 为 单位 》 Math.atan(0.6) 的 结果 为 
0.5404195002705842 

ceil(x) 返回 与 某 数 相等 或 大 于 该 数 的 最 小 整数 IMath.ceil(18.69) 的 结果 为 19 

cos(x) 返回 某 数 〈 以 弧度 为 单位 ) 的 正弦 值 Math.cos(0.6) 的 结果 为 0.8253356149096783 

exp(x) 返回 e 的 x 次 方 Math.exp(3) 的 结果 为 20.085536923187668 

floor(x) 与 ceil 相反 ， 返 回 与 某 数 相等 或 小 于 该 数 | Math.floor(18.69) 的 结果 为 18 

的 最 小 整数 

log(x) 返回 某 数 的 自然 对 数 〈 以 e 为 底 ) Math.log(0.6) 的 结果 为 -0.5108256237659907 

max(x,y) 返回 两 数 间 的 最 大 值 Math.max(16,-20) 的 结果 为 16 

min(x,y) 返回 两 数 间 的 最 小 值 Math.min(16,-20) 的 结果 为 -20 

pow(x,y) 返回 x 的 y 次 方 Math pow(2,3) 的 结果 为 8 

random() 返回 一 个 0~num-1 之 间 的 随机 数 每 次 产生 的 值 是 不 同 的 

round(x) 返回 四 舍 五 入 之 后 的 整数 Math.round(18.9678) 的 结果 为 19 

sin(x) 返回 某 数 〈 以 弧度 为 单位 ) 的 正弦 值 Math.sin(0.6) 的 结果 为 0.5646424733950354 

sqrt(x) 返回 某 数 的 平方 根 Math.sqrt(0.6) 的 结果 为 0.7745966692414834 

tan(x) 返回 某 数 的 正切 值 Math.tan(0.6) 的 结果 为 0.6841368083416923 


细心 的 读者 会 发 现 ， 在 上 述 的 方法 中 ， 唯 独 没 有 提供 四 舍 五 入 保留 小 数 的 方法 。 如 果 和 希望 
指定 保留 小 数 ， 可 使 用 以 下 两 种 方法 。 

1. 数学 方法 round 和 pow 配合 

四 舍 五 入 取 整 数 方法 round 和 求 某 数 的 次 寡 方 法 pow 配合 使 用 ， 公 式 如 下 : 

Math.round(num*Math pow(10.n))/Math pow(10.n) 

其 中 ，num 为 要 进行 四 舍 五 入 的 数值 ，n 为 保留 的 小 数位 数 。 例 如 ， 下 面 的 代码 分 别 为 保 
留 1 位 小 数 和 3 位 小 数 。 
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Var num=2011.1258; 

Var countl=Math.round (num*Math.pow(10,1))/Math.pow(10,1); 
// 保 留 1 位 小 数 ， 结 果 为 2011 .1 

Var count3= Math.round (num*Math.pow (10,3))/Math.pow(10,3); 
// 保 留 3 位 小 数 ， 结 果 为 2011 .126 


上 述 代 码 可 以 进行 简化 ， 如 下 所 示 。 
var num=2011.1258; 


var count1= Math.round (num*10)/10; // 保 留 1 位 小 数 ， 结 果 为 2011.1 
var count3= Math.round (num*1000)/1000; // 保 留 3 位 小 数 ， 结 果 为 2011 .126 


简化 代码 之 后 可 以 看 出 , 如 果 对 数值 保留 1 位 小 数 , 将 该 数值 放大 10 倍 取 整 , 再 缩小 1/10; 
如 果 对 数值 保留 2 位 小 数 ， 将 该 数值 放大 100 倍 取 整 ， 再 缩小 1/1100; 以 此 类 推 ， 即 可 对 数值 
保留 指定 小 数位 数 。 

2. JavaScript 的 toFixed 函数 和 toPrecision 函数 

JavaScript 针对 数值 (Number) 类 型 数据 提供 了 toFixed 函数 和 toPrecision 函数 ， 实 现 对 
数值 型 数据 保留 小 数 ， 如 表 13-5 所 示 。 


表 13-5 ”对 数值 型 数据 保留 小 数 的 函数 


四 舍 五 入 之 后 保留 x 位 小 数 
四 舍 五 入 之 后 保留 x 位 字符 


保留 小 数位 数 的 toFixed 函数 和 toPrecision 函数 的 使 用 格式 如 下 : 


数字 .toFixed (x) // 保 留 n 位 小 数 
数字 .toPrecision (x) // 保 留 n 位 数字 


例如 ， 下 面 的 代码 分 别 使 用 这 两 种 方法 实现 保留 小 数位 数 。 


Var num=2011.1258; 


var decl=num.toFixed(2) // 保 留 2 位 小 数 ， 结 果 为 2011 .13 

var dec2=num.toFixed(3) // 保 留 3 位 小 数 ， 结 果 为 2011 .126 

var dec3=num.toFixed(6) // 保 留 6 位 小 数 ， 结 果 为 2011 .125800 
var dec4=num.toPrecision(6) // 保 留 6 位 数字 ， 结 果 为 2011 .13 

var dec5=num.toPrecision(7) / /保留 7 位 数字 ， 结 果 为 2011 .126 

var dec6=num.toPrecision(10) / /保留 10 位 数字 ， 结 果 为 2011 .125800 
var dec6=num.toPrecision(2) / /保留 2 位 数字 ， 结 果 为 2 .0e+3 


toFixed 函数 中 的 参数 是 指 保留 的 小 数位 数 ， 而 toPrecision 函数 中 的 参数 是 指 除 小 
ER 本 司 交点 外 的 所 有 数字 位 数 。 
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【 例 13.2】 设计 程序 , 单 击 【随机 数 】 按 钮 ,使 用 Math 对 象 的 random 函数 产生 一 个 0~100 
之 间 ( 仿 0 和 100) 的 随机 整数 ， 并 在 对 话 框 中 显示 ， 如 图 13-4 所 示 ; 单 击 【计算 】 按 钮 ， 计 
算 该 随机 数 的 平方 、 平 方 根 和 自然 对 数 ， 保 留 2 位 小 数 ， 并 在 对 话 框 中 显示 ， 如 图 13-5 所 示 。 


悦 ”D 人 本 书 源 代码 Vode 图 7 人 0 名 “Dx\ 本 书 源码 vcodej 国 -人 0 
后 本 机 产生 吾 雪 ,并 计 其 其 平 _X | 
请 汪 百 度 一 下 ， 人 GUI 刘 


A Te 
Cd 
图 13-4 产生 随机 整数 图 13-5 计算 随机 整数 的 平方 、 平 方 根 和 自然 对 数 
具体 操作 步骤 如 下 : 


to 创建 HTML 文件 ， 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title> 随 机 产生 整数 ， 并 计算 其 平方 、 平 方 根 和 自然 对 数 </title> 

</head> 

<body> 

<form action="" method="post" name="myform" id="myform"> 
<input type="button" value=" 随 机 数 "> 
<input type="button" value=" 计 算 "> 

</form> 

</body> 

</html> 


上 @2 在 HTML 文件 的 head 部 分 输入 JavaScript 代码 。 


<script> 
var data; // 声 明 全 局 变量 ， 保 存 随机 产生 的 整数 
/* 随 机 数 函 数 */ 
function getRandom(){ 
data=Math.floor (Math.random()*101); //0~100 产 生 随 机 数 
alert ("随机 整数 为 : "+data); // 
1 


/* 随 机 整数 的 平方 、 平 方 根 和 自然 对 数 */ 


function cal(){ 
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var square=Math.pow(data,2); // 计 算 随 机 整数 的 平方 
var squareRoot=Math.sqrt (data) .toFixed(2); // 计 算 随 机 整数 的 平方 根 
var logarithm=Math.log (data) .toFixed(2);  // 计 算 随 机 整数 的 自然 对 数 
alert ("随机 整数 "+qdata+" 的 相关 计算 \n 平 方 \t 平 方 根 \t 自 然 对 数 
\n"+square+"\t"+squareRoot+"\t"+logarithm); 
// 输 出 计算 结果 
} 
</script> 
图 为 “随机 数 ” 按钮 和 “计算 ”按钮 添加 单 击 (onelick) 事件 ， 分 别 调用 随机 数 函 数 
(getRandom) 和 计算 函数 (cal)。 在 HTML 文件 中 ， 将 <input type="button" value=" 随 机 数 "> 
<input type="button" value=" 计 算 "> 这 两 行 代码 修改 成 如 下 代码 。 
<input type="button" value=" 随 机 数 " onclick="getRandom () "> 
<input type="button" value=" 计 算 " onclick="cal () "> 


L 国 保存 网 页 ， 浏 览 最 终 效 果 。 


13.3 “日 期 对 象 


在 JavaScript 中 ， 虽 然 没 有 日 期 类 型 的 数据 ， 但 是 在 开发 过 程 中 经 常会 处 理 日 期 ， 可 以 用 
日 期 (Date) 对 象 来 操作 日 期 和 和 时间 。 


13.3.1 创建 日 期 对 象 
在 JavaScript 中 ， 创 建 日 期 对 象 必须 使 用 new 语句 。 使 用 关键 字 new 新 建 日 期 对 象 时 ， 可 
以 使 用 下 述 四 种 方法 。 


方法 一 : 日 期 对 象 =New Date0 

方法 二 : 日 期 对 象 =New Date( 日 期 字 串 ) 

方法 三 : 日 期 对 象 =New Date( 年 ,月 ,日 [时 ， 分 ， 秒 ，[ 毫 秒 ]]) 
方法 四 : 日 期 对 象 =New Date (毫秒 ) 


上 述 四 种 创建 方法 的 区 别 如 下 : 


(1) 方法 一 创建 一 个 包含 当前 系统 时 间 的 日 期 对 象 。 

(2) 方法 二 可 以 将 一 个 字符 串 转换 成 日 期 对 象 。 这 个 字符 串 既 可 以 是 只 包含 日 期 的 字符 
串 ， 也 可 以 是 既 包 含 日 期 又 包含 时 间 的 字符 串 。JavaScript 对 日 期 格式 有 要 求 ， 通 常 使 用 的 格 
式 有 以 下 两 种 。 
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@ 日 期 字符 串 可 以 表示 为 "月 日 ,年 时 :分 : 秒 "。 其 中 ， 月 份 必须 使 用 英文 单词 ， 而 
其 他 部 分 可 以 使 用 数字 表示 ， 日 和 年 之 间 一 定 要 有 去 号 (,) 。 

@ 日 期 字符 串 可 以 表示 为 "年 /月 /日 时 :分 : 秒 "。 所 有 部 分 都 要 求 使 用 数字 ， 年 份 要 
求 使 用 四 位 数 ， 月 份 用 0 至 11 的 整数 代表 1 月 到 12 月。 


(3) 方法 三 通过 指定 年 月 日 时 分 秒 创建 日 期 对 象 。 时 分 秒 可 以 省 略 。 月 份 用 0 至 11 的 整 
数 ， 代 表 1 月 到 12 月 。 

(4) 方法 四 使 用 毫秒 来 创建 日 期 对 象 。 可 以 把 1970 年 1 月 1 日 0 时 0 分 0 秒 0 毫 秒 看 成 
一 个 基数 ， 而 给 定 的 参数 代表 距离 这 个 基数 的 毫秒 数 。 例 如 ， 指 定 参数 毫秒 为 3000， 则 该 日 期 
对 象 中 的 日 期 为 1970 年 1 月 1 日 0 时 0 分 0 秒 3 毫秒 。 


下 面 使 用 上 述 四 种 方法 创建 日 期 对 象 。 


【 例 13.3】 《实例 文件 :ch13\13.3.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 创 建 日 期 对 象 </title> 

<script> 

// 以 当前 时 间 创 建 一 个 日 期 对 象 

Var myDatel=new Date(); 

// 将 字符 串 转换 成 日 期 对 象 ， 该 对 象 代表 日 期 为 2010 年 6 月 10 日 

Var myDate2=new Date ("June 10,2010"); 

// 将 字符 串 转换 成 日 期 对 象 ， 该 对 象 代表 日 期 为 2010 年 6 月 10 日 

Var myDate3=new Date ("2010/6/10") 7 

// 创 建 一 个 日 期 对 象 ， 该 对 象 代表 日 期 和 时 间 为 2011 年 10 月 19 日 16 时 16 分 16 秒 

Var myDate4=new Date (2011,10,19,16,16,16) 7 

// 创 建 一 个 日 期 对 象 ， 该 对 象 代表 距离 1970 年 1 月 1 日 0 分 0 秒 20000 毫 秒 的 时 间 

Var myDate5=new Date (20000) 

// 分 别 输出 以 上 日 期 对 象 的 本 地 格式 

document .write ("myDatel 所 代表 的 时 间 为 : "+myDatel .toLocaleString () +"<br/>") 
document .write ("myDate2 所 代表 的 时 间 为 : "+myDate2 .toLocaleString ()+"<br/>") 7 
document .write ("myDate3 所 代表 的 时 间 为 : "+myDate3.toLocalestring()+"<br/>"); 
document .write ("myDate4 所 代表 的 时 间 为 : "+myDate4.toLocalestring()+"<br/>"); 
document .write ("myDate5 所 代表 的 时 间 为 : "+myDate5.toLocalestring()+"<br/>"); 
</script> 

</head> 

<body> 

</body> 

</html> 


在 正 11.0 中 的 浏览 效果 如 图 13-6 所 示 。 
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室 口 x 

名 ”DA\ 本 书 源 代码 \code 谤 图 ~ 搜索 
局 创建 日 期 对 象 x | 
请 党 百 度 一 下 ， 你 就 知道 
myDatel 所 代表 的 时 间 为 : 2018 年 9 月 20 日 13:42:04 
myDate2 所 代表 的 时 间 为 : 2010 年 6 月 10 日 0:00:00 
myDate3 所 代表 的 时 间 为 : 2010 年 6 月 10 日 0:00:00 
myDate4 所 代表 的 时 间 为 : 2011 年 11 月 19 日 16:16:16 
myDate5 所 代表 的 时 间 为 : 1970 年 1 月 1 日 8:00:20 


图 13-6 创建 日 期 对 象 


13.3.2 日 期 对 象 的 常用 函数 


日 期 对 象 的 方法 主要 分 为 三 大 组 : setXxx、getXxx 和 toXxx。setXxx 方法 用 于 设置 时 间 和 
日 期 值 ，getXxx 方法 用 于 获取 时 间 和 日 期 值 ，toXxx 主要 是 将 日 期 转换 成 指定 格式 。 日 期 对 象 
的 方法 如 表 13-6 所 示 。 


表 13-6 日 期 对 象 的 函数 


函数 描述 

Date0 返回 当日 的 日 期 和 时 间 

getDate() 从 Date 对 象 返回 一 个 月 中 的 某 一 天 (1 ~31) 
getDay0 从 Date 对 象 返回 一 周 中 的 某 一 天 (0~ 6) 
getMonth() 从 Date 对 象 返回 月 份 (0~ 11) 

getFullYear() 从 Date 对 象 以 四 位 数字 返回 年 份 

getYear() 请 使 用 getFullYear0 方 法 代替 

getHours() 返回 Date 对 象 的 小 时 (0~23) 

getMinutes() 返回 Date 对 象 的 分 钟 (0~59) 

getSeconds() 返回 Date 对 象 的 秒 数 (0~59) 

getMilliseconds() 返回 Date 对 象 的 毫秒 (0~999) 

getTime0) 返回 1970 年 1 月 1 日 至 今 的 毫秒 数 
getTimezoneOffsetO 返回 本 地 时 间 与 格林 尼 治 标准 时 间 (GMT) 的 分 钟 差 
getUTCDate0 根据 世界 时 从 Date 对 象 返回 月 中 的 一 天 (1~31) 
getUTCDay0 根据 世界 时 从 Date 对 象 返回 周 中 的 一 天 (0~6) 
getUTCMonth() 根据 世界 时 从 Date 对 象 返回 月 份 (0~11) 
getUTCFullYear0 根据 世界 时 从 Date 对 象 返回 四 位 数 的 年 份 
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( 续 表 ) 
函数 描述 
getUTCHours0) 根据 世界 时 返回 Date 对 象 的 小 时 〈0~23) 
getUTCMinutes() 根据 世界 时 返回 Date 对 象 的 分 钟 (0~59) 
getUTCSeconds() 根据 世界 时 返回 Date 对 象 的 秒 钟 (0~59) 
getUTCMilliseconds() 根据 世界 时 返回 Date 对 象 的 毫秒 (0~999) 
Parse0) 返回 1970 年 1 月 1 日 午夜 到 指定 日 期 (字符 串 ) 的 毫秒 数 
setDate() 设置 Date 对 象 中 月 的 某 一 天 (1~31) 
setMonthO) 设置 Date 对 象 中 的 月 份 (0~11) 
setFullYear0) 设置 Date 对 象 中 的 年 份 〈 四 位 数字 ) 
setYear() 使 用 setFullYear0 方 法 代 蔡 
setHours() 设置 Date 对 象 中 的 小 时 (0~23) 
setMinutes() 设置 Date 对 象 中 的 分 钟 (0~59) 
setSeconds() 设置 Date 对 象 中 的 秒 钟 (0~59) 
setMilliseconds() 设置 Date 对 象 中 的 毫秒 (0~999) 
setTime() 以 毫秒 设置 Date 对 象 
setUTCDate() 根据 世界 时 设置 Date 对 象 中 月 份 的 一 天 (1~31) 
setUTCMonth() 根据 世界 时 设置 Date 对 象 中 的 月 份 (0~11) 
setUTCFullYear0 根据 世界 时 设置 Date 对 象 中 的 年 份 〈 四 位 数字 ) 
setUTCHours() 根据 世界 时 设置 Date 对 象 中 的 小 时 (0~23) 
setUTCMinutes() 根据 世界 时 设置 Date 对 象 中 的 分 钟 (0~59) 
setUTCSeconds() 根据 世界 时 设置 Date 对 象 中 的 秒 钟 (0~59) 
setUTCMilliseconds() 根据 世界 时 设置 Date 对 象 中 的 毫秒 (0~999) 
toSource() 返回 该 对 象 的 源 代码 
toString0) 把 Date 对 象 转 换 为 字符 串 
toTimeStringO 把 Date 对 象 的 时 间 部 分 转换 为 字符 串 
toDateString() 把 Date 对 象 的 日 期 部 分 转换 为 字符 串 
toGMTString0) 使 用 toUTCString() 方 法 代 蔡 
toUTCStringO 根据 世界 时 把 Date 对 象 转 换 为 字符 串 
toLocaleString() 根据 本 地 时 间 格 式 把 Date 对 象 转换 为 字符 串 
toLocaleTimeString() 根据 本 地 时 间 格 式 把 Date 对 象 的 时 间 部 分 转换 为 字符 串 
toLocaleDateString() 根据 本 地 时 间 格 式 把 Date 对 象 的 日 期 部 分 转换 为 字符 串 
UTCO 根据 世界 时 返回 1997 年 1 月 1 日 到 指定 日 期 的 毫秒 数 


valueOfO) 


返回 Date 对 象 的 原始 值 
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下 面 以 toLocaleString0 函 数 为 例 进 行 讲解 。toLocaleString0 函 数 的 语法 如 下 : 
日 期 对 象 .toLocaleFormat () 


【 例 13.4】〔 实 例文 件 : ch13\13.4.html) 
<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<script> 
Var now=new Date(); 
document .write ("今天 是 : "+now.toLocalestring()); 
</script> 
</head> 
<body> 
</body> 
</html> 


在 正 11.0 中 的 浏览 结果 如 图 13-7 所 示 。 


- 0O x 
丫 ”D\ 本 书 源 代码 \code 煌 图 ~ 中 搜索 … 
筷 创建 日 期 对 铺 x 号 
请 当 百 度 一 下 ， 你 就 知道 


今天 是 : 2018 年 9 月 20 日 15:32:44 


图 13-7 使 用 toLocaleString0 函 数 


13.3.3 “日 期 间 的 运算 

日 期 数据 之 间 的 运算 通常 包括 一 个 日 期 对 象 加 上 整数 的 年 、 月 或 日 ， 两 个 日 期 对 象 相 减 运 
算 。 

1. 日 期 对 象 与 整数 年 、 月 或 日 相 加 

日 期 对 象 与 整数 年 、 月 或 日 相 加 ， 需 要 将 它们 相 加 的 结果 通过 setXxx 函数 设置 成 新 的 日 
期 对 象 ， 实 现 日 期 对 象 与 整数 年 、 月 和 日 相 加 ， 语 法 格式 如 下 : 


date.setDate (date.getDate () tvalue) ; // 增 加 天 
date.setMonth (date .getMonth ()+value); // 增 加 月 
date.setFullYear (date.getFullYear () +value); // 增 加 年 
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2. 日 期 相 减 

JavaScript 中 允许 两 个 日 期 对 象 相 减 ， 相 减 之 后 将 会 返回 这 两 个 日 期 之 间 的 毫秒 数 。 通 常 
会 将 毫秒 转换 成 秒 、 分 、 小 时 、 天 等 。 例 如 ， 下 面 的 程序 段 实 现 了 两 个 日 期 相 减 ， 并 分 别 转换 
成 秒 、 分 、 小 时 和 天 。 


【 例 13.5】 《实例 文件 : ch13\13.5.html) 


<html> 

<head> 

<title> 创 建 日 期 对 象 </title> 

<script> 

var now=new Date(); // 以 现在 时 间 定 义 日 期 对 象 

var nationalDay=new Date(2019,10,1,0,0,0);  // 以 2019 年 国庆 节 定 义 日 期 对 象 

var msel=nationalDay-now // 相 差 毫 秒 数 

// 输 出 相差 时 间 

document .write ("距离 2019 年 国庆 节 还 有 : "+msel+" 毫 秒 <br/>"); 

document .write ("距离 2019 节 还 有 : "+parseInt (msel/1000)+" 秒 <br/>"); 

document .write ("距离 2019 年 国庆 节 还 有 : "+parseInt (msel/ (60*1000) )+" 分 钟 
<br/>"); 

document .write ("距离 2019 年 国庆 节 还 有 : "+parseInt (msel/ (60*60*1000))+" 小 时 
<br/>"); 

document .write ("距离 2019 年 国庆 节 还 有 : "+parseInt (msel/ (24*60*60*1000))+" 天 
be 

</script> 

</head> 

<body> 

</body> 

</html> 


在 下 11.0 中 的 浏览 效果 如 图 13-8 所 示 。 


= 口 x 
| 问 D\ 本 书 源 代 码 code 轿 -他 搜索- 
| 号 创建 日 期 对 x 区 

请 各 百 朗 一 下 ,你 就 50 道 

距离 2019 年 国庆 节 还 有 : 35115065442 毫 秒 
距离 2019 年 国庆 节 115065 秒 


距离 2019 年 国庆 节 : 
距离 2019 年 国庆 节 还 有 : 9754 小 时 
距离 2019 年 国庆 节 还 有 : 406 天 


图 13-8 日 期 对 象 相 减 运行 结果 


13.4 数组 对 象 


数组 是 有 序数 据 的 集合 ，JavaScript 中 的 数组 元 素 允 许 属于 不 同 数据 类 型 。 用 数组 名 和 下 
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标 可 以 唯一 确定 数组 中 的 元 素 。 


13.4.1 数组 对 象 的 创建 


在 实际 应 用 中 ， 往 往 会 遇 到 具有 相同 属性 又 与 位 置 有 关 的 一 批 数据 。 例 如 ，40 个 学 生 的 
数学 成 绩 ， 对 于 这 些 数据 当然 可 以 用 声明 M1,M2,…,M40 等 变量 来 分 别 代表 每 个 学 生 的 数学 成 
绩 ， 其 中 M1 代表 第 1 个 学 生 的 成 绩 ，M2 代表 第 2 个 学 生 的 成 绩 ，…… ，M40 代表 第 40 个 学 
生 的 成 绩 , 其 中 Ml 中 的 1 表示 其 所 在 的 位 置 序号 。 这 里 的 M1,M2,…,M40 通常 称 为 下 标 变量 。 
显然 ， 如 果 用 简单 变量 来 处 理 这 些 数据 会 很 麻烦 ， 而 用 一 批 具 有 相同 名 字 、 不 同 下 标的 下 标 变 
量 来 表示 同一 属性 的 一 组 数据 不 但 很 方便 ， 而 且 能 更 清楚 地 表示 它们 之 间 的 关系 。 

数组 是 具有 相同 数据 类 型 的 变量 集合 ， 这 些 变量 都 可 以 通过 索引 进行 访问 。 数 组 中 的 变量 
称 为 数组 的 元 素 ， 数 组 能 够 容纳 元 素 的 数量 称 为 数组 的 长 度 。 数 组 中 的 每 个 元 素 都 具有 唯一 的 
索引 或 称 为 下 标 ) 与 其 相对 应 ， 在 JavaScript 中 数组 的 索引 从 零 开 始 。 

数组 对 象 使 用 Array， 创 建 数组 对 象 有 三 种 方法 。 


(1) 新 建 一 个 长 度 为 零 的 数组 

Var 数组 名 =new Array( ); 

例如 ， 声 明 数 组 为 myArrl1、 长 度 为 0， 代码 如 下 : 
Var myArrl=new Array(); 

(2) 新 建 一 个 长 度 为 n 的 数组 

var 数组 名 =new Array( n ); 

例如 ， 声 明 数 组 为 myArr2、 长 度 为 6， 代 码 如 下 : 
var myArr2=new Array (6); 

(3) 新 建 一 个 指定 长 度 的 数组 并 赋值 
Var 数组 名 =new Array (元 素 1, 元素 2, 元 素 3,…); 
例如 ， 声 明 数 组 为 myArr3， 并 且 分 别 赋值 为 1、2、3、4、 代 码 如 下 : 
var myArr3=new Array (1,2,3,4); 


上 面 这 一 行 代码 创建 了 一 个 数组 myArr3， 并 且 包 含 4 个 元 素 myAr3[0]、myAm3[1]、 
InyArr3[2]、myArr3[3]， 这 4 个 元 素 值 分 别 为 1、2、3、4。 
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13.4.2 ”数组 对 象 的 操作 


1. 数组 元 素 的 长 度 

数组 对 象 的 属性 非常 少 ， 最 常用 的 属性 length 可 以 返回 数组 对 象 的 长 度 ， 也 就 是 数组 中 元 
素 的 个 数 。length 的 取 值 随 着 数组 元 素 的 增 减 而 变化 ， 并 且 用 户 还 可 以 修改 length 属性 值 。 假 
设 有 一 个 长 度 为 4 的 数组 ， 那 么 数组 对 象 的 length 属性 值 将 会 是 4， 如 果 用 户 将 length 属性 赋 
值 为 3， 那 么 数组 中 的 最 后 一 个 数组 元 素 将 会 被 人 删除， 并且 数组 的 长 度 也 会 改 为 3。 如 果 将 该 
数组 的 length 属性 值 设置 为 7， 那 么 该 数组 的 长 度 将 会 变 成 7， 而 数组 中 的 第 3 个 、 第 4 个 和 
第 5 个 元 素 的 值 为 undefined。 因 此 ，length 还 具有 快速 添加 和 删除 数组 元 素 的 功能 ， 但 是 添加 
和 删除 只 能 从 数组 尾部 进行 ， 并 且 添 加 的 元 素 值 都 为 undefined。 例如 ， 声 明 长 度 为 3 的 数组 对 
象 myArr， 并 赋值 "a","b","c"， 输 出 其 长 度 ， 并 将 长 度 修改 为 2， 代 码 如 下 : 

vvar myArr=new Array ("a","b","c");  // 创 建 数组 


document .write ("数组 长 度 为 : "+myArr.1length); ”// 输 出 数组 长 度 
myArr .length=2; // 修 改 长 度 为 2 


2. 访问 数组 
引用 数组 元 素 是 通过 数组 的 序列 号 ,在 JavaScript 数组 中 的 元 素 序列 号 是 从 0 开始 计算 的 ， 
然后 依次 加 1。 可 以 对 数组 元 素 赋值 或 取 值 ， 其 语法 规则 如 下 : 


数组 变量 [i]= 值 ， ”// 为 数组 元 素 赋值 
变量 名 = 数组 变量 [i] ; ”// 使 用 数组 元 素 为 变量 赋值 


其 中 ，i 为 数组 元 素 序列 号 。 
例如 ， 下 面 的 例子 创建 长 度 为 3 的 数组 myArr， 并 且 对 第 1 个 元 素 赋值 ， 分 别 输出 第 1 个 
元 素 和 第 2 个 元 素 。 


【 例 13.6】〔 实 例文 件 ，ch13\13.6.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 创 建 日 期 对 象 </title> 

<script> 

Var myArr=new Array(3);  // 创 建 数组 
myArr[0]=6; ”// 给 下 标 为 0 的 元 素 赋值 

// 输 出 第 1 个 元 素 和 第 2 个 元 素 值 
document .write ("第 1 个 元 素 值 为 : "+myArr[0]+"<br /> 第 2 个 元 素 值 为 : "+myArr[1]); 
</script> 

</head> 

<body> 

</body> 
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</html> 


程序 段 中 为 第 1 个 元 素 赋值 6, 第 2 个 元 素 和 第 3 个 元 素 均 为 初始 化 , 默认 值 为 undefined。 
网 页 预览 效果 如 图 13-9 所 示 。 


- OO x 
名 ”D:\ 本 书 源 代码 code\ 国 7 
后 创建 日 期 对 象 x 加 


商洛 百 度 一 下 ， 你 就 知道 


第 1 个 元 素 值 为 : 6 
第 2 个 元 素 值 为 : undefined 


图 13-9 数组 元 素 的 赋值 与 读 取 


如 果 希 望 对 数组 对 象 的 元 素 进行 读 取 或 赋值 操作 , 即 遍历 数组 , 就 可 以 使 用 前 面 学 习 的 for 
语句 或 for...in 语句 。for 语句 的 使 用 请 参阅 前 面 章 节 ，for...in 语句 格式 如 下 : 
for (var 变量 名 in 数组 名 ) { 


循环 体 语句 
} 


例如 ， 分 别 使 用 for.…in 语句 和 for 语句 遍历 数组 元 素 并 输出 ， 代 码 如 下 : 


Var arr=new Array ("good",3,-6.5,true); 
/* 使 用 for...in 语 句 遍历 数组 元 素 */ 
forl(var s in arr) 


{ 
document .write (arr[s]+"<br/>"); // 输 出 元 素 值 


于 
/* 使 用 for 语 句 遍 历数 组 元 素 */ 
for (Var i=0;i<arr.length;i++) 
{ 
document .write (arr [i]+"<br/>"); 
} 


上 述 代 码 中 ， 使 用 for...in 语句 和 for 语句 遍历 数组 元 素 的 结果 是 一 臻 的， 但 是 for 语句 使 
用 时 ， 必 须 借助 数组 的 length 属性 才能 完成 遍历 。 相 对 而 言 ，for.…in 语句 在 遍历 数组 时 较 for 
语句 容易 。 

3. 添加 数组 元 素 

C#、Java 等 语言 定义 的 数组 ， 其 长 度 是 固定 不 变 的 ， 而 JavaScript 语言 与 它们 不 相同 ， 数 组 的 
长 度 可 以 随时 修改 。 在 JavaScript 中 ， 可 以 为 数组 随意 增加 元 素 ， 增 加 数组 元 素 有 两 种 方法 。 
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(1) 修改 数组 的 length 属性 
假设 现 有 数组 的 长 度 为 3， 通过 修改 length 属性 为 5S， 会 将 数组 增加 2 个 元 素 。 新 增加 的 
这 2 个 元 素 值 为 undefined。 
(2) 直接 为 元 素 赋值 
假设 现 有 数组 arr， 长 度 为 3， 那 么 它 包 含 的 元 素 是 amr[0]、ar[1]、arf[2]。 如 果 增 加 代码 
arr[4]=10， 那 么 将 为 数组 增加 2 个 元 素 ，ar[3] 和 arr[4]， 其 中 arr[3] 的 值 为 undefined、arr[4] 的 
值 为 10。 


4. 删除 数组 元 素 

通过 修改 数组 的 length 属性 ， 可 以 从 尾部 删除 数组 元 素 。 例 如 ， 假 设 有 长 度 为 5 的 数组 ， 
删除 尾部 2 个 元 素 ， 只 需要 将 数组 长 度 设 置 为 3 即 可 。 

JavaScript 提供 的 delete 运算 符 可 以 删除 任意 位 置 的 数组 元 素 。 但 是 ， 该 运算 符 并 不 是 真 
正 删除 数组 元 素 ， 而 是 将 元 素 值 修改 成 undefined, 数组 的 长 度 不 会 发 生 改 变 。 假设 一 个 数组 中 
有 3 个 元 素 ， 使 用 delete 运算 符 删 除 第 2 个 元 素 之 后 ， 数 组 的 length 属性 还 是 会 返回 3， 只 是 
第 2 个 元 素 赋值 为 undefined。 下 列 代码 实现 了 尾部 元 素 的 删除 和 非 尾部 元 素 的 删除 。 

Var myArr=new Array("a","b","c","d","e"); // 创 建 数组 

myRrr .Length=37 // 设 置 数组 长 度 为 3， 即 删除 值 为 rd" 和"e" 的 元 素 

document .write (myArr.length); // 输 出 数组 长 度 ， 结 果 为 3 

delete myArr[1]; // 删 除 下 标 为 1 的 元 素 


document .write (myArr.length); // 输 出 数组 长 度 ， 结 果 为 3 
document .write (myArr[1]); // 输 出 元 素 myArr[1] ， 结 果 为 undefined 


真正 删除 非 尾部 元 素 ， 需 要 借助 splice 函数 ， 在 下 一 节 中 会 详细 讲述 。 
13.4.3 ”数组 对 象 的 常用 方法 


在 JavaScript 中 ， 有 大 量 数 组 常用 操作 的 方法 ， 例 如 合并 数组 、 删 除数 组 元 素 、 添 加 数组 
元 素 、 数 组 元 素 排序 等 。 数 组 对 象 的 函数 如 表 13-7 所 示 。 


表 13-7 ”数组 对 象 的 常用 函数 


函数 说 明 

concat( 数 组 2, 数 组 3，..……… ) 合并 数组 

join( 分 割 符 ) 将 数组 转换 为 字 串 

pop0 删除 最 后 一 个 元 素 ， 返 回 最 后 一 个 元 素 
push (元 素 1, 元 素 2，-.…… ) 添加 元 素 ， 返 回 数组 的 长 度 

shiftO 删除 第 一 个 元 素 ， 返 回 第 一 个 元 素 
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( 续 表 ) 
函数 说 明 
unshift( 元 素 1, 元 素 2，.……) 添加 元 素 至 数组 开始 处 
slice( 开 始 位 置 [, 结 束 位 置 ]) 从 数组 中 选择 元 素 组 成 新 的 数组 
splice( 位 置 ,多 少 [, 元 素 1, 元 素 2,.…… ]) 从 数组 中 删除 或 替换 元 素 
sort0 排序 数组 
reverse() 倒序 数组 
toString 返回 一 个 字符 串 ， 该 字符 串 包含 数组 中 的 所 有 元 素 ， 各 个 
元 素 间 用 逗号 分 隔 


1. 数组 的 合并 及 数组 元 素 的 增加 、 删 除 
JavaScript 提供 的 concat 函数 可 以 合并 数组 ，pop 方法 和 shi 方法 可 以 删除 元 素 ，push 函 
数 和 unshift 函数 可 以 增加 数组 元 素 。 
【 例 13.7】 新 建 数组 MyArr 并 赋值 “A”“B”“C”， 新 建 数 组 MyArr2 并 赋值 “J”“K” 
“ 工 ”， 将 数组 MyArr 和 MyArr2 合并 为 MyArr3 并 输出 MyArr3 数据 到 页 面 ， 删 除 MyArr3 中 
第 一 个 元 素 和 最 后 一 个 元 素 并 输出 MyArr3 数据 到 页 面 。 网 页 程序 预览 效果 如 图 13-10 所 示 。 


- oO x 
名 “DA 书 深 f 肥 code 国 ”| 搜索 
| 登 数组 合并 添加 种 除 探 作 x 加 
请 人 百度 一 下 ， 你 9 者 


x yz B C 
组 成 新 的 数组 : 
z B 张 三 李 四 于 一 


图 13-10 ”网 页 程序 预览 效果 
有 具体 操作 步骤 如 下 : 


加 创建 HTML 文件 ， 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title> 数 组 合并 添加 删除 操作 </title> 
</head> 

<body> 

</body> 

</html> 
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IO 到 新 建 JavaScript 文件 ， 保 存 文件 名 为 1js， 保 存在 与 HIML 文件 相同 的 位 置 。 在 1js 
文件 中 输入 如 下 代码 。 


Var myArr=new Array ("A","B","C") ; // 创 建 数 组 myArr 
var myArr2=new Array ("J","K","L"); // 创 建 数组 myArr2 
Var myArr3=new Array(); // 创 建 数 组 myArr3 
myArr3=myArr3.concat (myArr,myArr2); 
// 数 组 myArr 和 myArr2 合 并 ， 并 赋 给 数组 myArr3 
/* 输 出 合并 后 数组 myArr3 的 元 素 值 */ 
document .write ("合并 后 数组 : ") ; 
forl(i in myArr3) 
{ 
document .write (myArr3[i]+" "™); 
} 
myArr3.pop(); ”// 删 除 myArr3 数 组 的 最 后 一 个 元 素 
/* 输 出 删除 最 后 一 个 元 素 后 的 数组 */ 
document .write ("<br /> 删除 最 后 一 个 元 素 : "); 
for (i in myArr3) 
{ 
document .write (myArr3[i]+" "™); 
} 
myArr3.shift();  // 删 除 myArr3 数 组 的 第 一 个 元 素 
/* 输 出 删除 第 一 个 元 素 后 的 数组 */ 
document .write ("<br /> 删除 第 一 个 元 素 : "); 
for(i in myArr3) 
{ 
document .write (myArr3[i]+" "); 
} 
myArr3.push("m","n","q");  // 尾 部 追加 三 个 元 素 
/* 输 出 在 尾部 追加 元 素 后 的 数组 */ 
document .write ("<br /> 尾部 追加 三 个 元 素 : "); 
for(i in myArr3) 
{ 
document .write (myArr3[i]+" "™); 
. 
myArr3.unshift ("x","y","z"); // 数 组 开头 添加 三 个 元 素 
/* 输 出 在 开头 添加 元 素 后 的 数组 */ 
document .write ("<br /> 开头 插入 三 个 元 素 : <br />") 
for(i in myArr3) 
{ 
document .write (myArr3[i]+" ") 7 
4: 
Var myArr4=myArr3.slice(2,4); 
// 在 第 二 个 位 置 删 除 4 个 数组 元 素 ， 并 将 修改 后 的 数组 赋值 给 新 数组 myArr4 
// 输 出 组 成 的 新 数组 
document .write ("<br /> 组 成 新 的 数组 : <br />"); 
var s=myArr4.join(" ");  // 将 数组 转换 成 字符 串 ， 用 空格 分 隔 
document .write(s);  // 输 出 字符 串 
var s2=" 张 三 , 李 四 , 王 五 "; ”// 声 明 字符 串 
var myArr5=s2.split(",");  // 用 有 逗号 将 字符 串 s2 分 隔 到 数组 myArr5 
/* 输 出 数组 myArr5*/ 


for(i in myArr5) 
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{ 
document .write (myArr5[i]+" "™); 
y 


罗 绅 在 HTML 文件 的 head 部 分 ， 输 入 JavaScript 代码 ， 如 下 所 示 。 

<script src=1.js> 

</script> 

2. 排序 数组 和 反 转 数组 

JavaScript 提供 了 数组 排序 的 方法 sort([ 比 较 函 数 名 ]), 如 果 没 有 比较 函数 , 元 素 按照 ASCII 
字符 顺序 升序 排列 ， 如 果 给 出 比较 函数 ， 根 据 函 数 进行 排序 。 

例如 ， 下 述 代码 使 用 sort 函数 对 数组 arr 进行 排序 。 


Var arr=new Array(l1,20,8,12,6,7); 
arr.sort (); 


数组 排序 后 将 得 到 结果 : 1,12,20,6,7,8。 

上 面 没 有 使 用 比较 函数 的 sort 方法 , 而 是 按 字 符 的 ASCII 值 排序 的 。 先 从 第 一 个 字符 比较 ， 
如 果 第 1 个 字符 相等 ， 再 比较 第 2 个 字符 ， 以 此 类 推 。 

对 于 数值 型 数据 ， 如 果 按 字符 比较 ， 得 到 的 结果 并 不 是 用 户 所 需要 的 ， 因 此 需要 借助 比较 
函数 。 比 较 函 数 有 两 个 参数 ， 分 别 代 表 每 次 排序 时 的 两 个 数组 项 。sort0 排 序 时 每 次 比较 两 个 数 
组 项 都 会 执行 这 个 参数 ， 并 把 两 个 比较 的 数组 项 作为 参数 传递 给 这 个 函数 。 当 函数 返回 值 大 于 
0 的 时 候 就 交换 两 个 数组 的 顺序 ， 否 则 就 不 交换 。 也 就 是 说 ， 函 数 返回 值 小 于 0， 表 示 升 序 排 
列 ; 函数 返回 值 大 于 0， 表 示 降 序 排列 。 


【 例 13.8】 新 建 数 组 x 并 赋值 “1,20,8,12,6,7”， 使 用 sort 方法 排序 数组 并 输出 x 数组 到 页 

面 。 网 页 程序 预览 效果 如 图 13-11 所 示 。 
- 0 x 
外 ”D:\ 本 书 源 代码 \code 泊 图 ”搜索 .. 


忆 数组 排序 x 
请 当 百 度 一 下 ， 你 就 知 遭 


排序 前 数组 :1,20,8,12,6,7 
没有 使 用 比较 函数 排序 后 数组 :1,12,20,6,7,8 
排序 升序 后 数组 :1,6,7,8,12,20 


排序 降序 后 数组 :20,12,8,7,6,1 


图 13-11 网 页 程序 预览 效果 
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具体 操作 步骤 如 下 : 
国 则 创建 HTML 文件 ， 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 
<title> 数 组 排序 </title> 
</head> 

<body> 

</body> 

</html> 


ti 到 新 建 JavaScript 文件 ， 保 存 文件 名 为 1js， 保 存在 与 HIML 文件 相同 的 位 置 。 在 1.js 
文件 中 输入 如 下 代码 。 


Var x=new Array (1,20,8,12,6,7);  // 创 建 数组 
document .write ("排序 前 数组 :"+x.join(",")+"<p>"); // 输 出 数组 元 素 
x.sort (); ”// 按 字符 升序 排列 数组 
document .write ("没有 使 用 比较 函数 排序 后 数组 : "+x.join(",")+"<p>"); 
// 输 出 排序 后 数组 
zx.sort (asc); // 有 比较 函数 的 升序 排列 
/* 升 序 比较 函数 */ 
function asc (a,b) 
{ 
return a-b; 
} 
document .write ("排序 升序 后 数组 :"+x.join(",")+"<p>");// 输 出 排序 后 数组 
x.sort (des); // 有 比较 函数 的 降序 排列 
/* 降 序 比较 函数 */ 
function des (a,b) 
{ 
return b-a; 
} 
document .write ("排序 降序 后 数组 :"+x.join(",") );// 输 出 排序 后 数组 


t@ 引 在 HTML 文件 的 head 部分， 输入 JavaScript 代码 ， 如 下 所 示 。 


<script src=1.js> 
</Script> 


13.5 ”综合 实例 一 一 随机 验证 码 和 动态 时 钟 


网 站 为 了 防止 用 户 利用 机 器 人 自动 注册 、 登 录 、 灌 水 ， 采 用 了 验证 码 技 术 。 所 谓 验 证 码 ， 
就 是 将 一 串 随机 产生 的 数字 或 符号 生成 一 幅 图 片 , 再 在 图 片 里 加 上 一 些 干扰 像素 (防止 OCR)， 
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需要 用 户 肉眼 识别 其 中 的 验证 码 信息 并 输入 表单 提交 网 站 验证 ， 验 证 成 功 后 才能 使 用 某 项 功 
能 。 本 例 将 产生 一 个 由 位 数字 和 大 小 写字 母 构成 的 验证 码 。 
【 例 13.9】 随机 产生 一 个 由 n 位 数字 和 字母 组 成 的 验证 码 ， 如 图 13-12 所 示 。 单 击 【 刷 新 】 
按钮 ， 重 新 产生 验证 码 ， 如 图 13-13 所 示 。 
提示 : 使 用 数学 对 象 中 的 随机 数 函 数 random 和 字符 串 的 取 字 符 函 数 charAt。 


过 口 x 和 口 x 
局 。D:\ 本 书 源 代码 vode\ 国 司 。D:\ 本 书 源 代 码 vcode\j 图 
后 随机 验证 码 x 加 合 随机 验证 码 x | 
再 当 百 度 一 下 ， 你 Si 和 者 请 当 百 度 一 下 ， 你 8 知道 
hugE | 刷新 o 国 本 
图 13-12 随机 验证 码 图 13-13 ”刷新 验证 码 


具体 操作 步骤 如 下 : 


ti 到 创建 HIML 文件 ， 并 输入 代码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 
<title> 随 机 验证 码 </title> 
</head> 

<body> 

<span id="msg"></span> 
<input type="button" value=" 刷 新 > 
</body> 

</html> 


<span> 标 记 没有 什么 特殊 的 意义 ， 它 显示 菜 行内 的 独特 样式 ， 在 这 里 主要 用 于 显示 
ER 产生 的 验证 码 。 为 了 保证 后 面 程序 的 正常 运行 ， 一 定 不 要 省 咯 过 属性 及 修改 取 值 。 


it@ 到 新 建 JavaScript 文件 ， 保 存 文件 名 为 getCode.js， 保 存在 与 HTML 文件 相同 的 位 置 。 
在 getCode.js 文件 中 输入 如 下 代码 。 


/* 产 生 随 机 数 函数 */ 
function validateCode (n){ 
/* 验 证 码 中 可 能 包含 的 字符 */ 
var 
s="abcdefghijklmopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXY20123456789"; 
var ret=""; // 保 存 生成 的 验证 码 
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/* 利 用 循环 ， 随 机 产生 生 验 证 码 中 的 每 个 字符 */ 

for (var i=0;i<n;i++) 

汪 
var index=Math.floor (Math.random()*62); // 随 机 产生 一 个 0-62 之 间 的 数字 
ret+=s.charAt (index) 7 
// 将 随机 产生 的 数字 当 作 字符 串 的 位 置 下 标 ， 在 字符 串 s 中 取出 该 字符 ， 并 入 ret 中 

} 

return ret;  // 返 回 产 生 的 验证 码 

} 


/* 显 示 随机 数 函 数 */ 

function show(){ 
document .getElementById ("msg") .innerHTML=validateCode (4); 
// 在 id 为 mnsg 的 对 象 中 显示 验证 码 

} 

window.onload=show; ”// 页 面 加 载 时 执行 函数 show 


。 3 | 在 getCodejs 文件 中 ，validateCode 函数 主要 用 于 产生 指定 位 数 的 随机 数 ， 并 返回 
时 3 和 该 随机 数 。 函 数 show 主要 是 调用 validateCode 函数 ， 并 在 id 为 msg 的 对 象 中 显示 
随机 数 ， 


在 show 函数 中 ，document 的 getElementById("msg") 函 数 是 使 用 DOM 模型 获得 对 象 ， 
innerHTML 属性 是 修改 对 象 的 内 容 ， 后 面 会 详细 讲述 。 


ti@O3j 在 HIML 文件 的 head 部 分 ， 输 入 JavaScript 代码 ， 如 下 所 示 。 
<script src="getCode.js" type="text/javascript"></script> 


li@ 细 在 HTML 文件 中 ， 修 改 “ 刷 新 ”按钮 代码 ， 修 改 <input type="button" value=" 刷 新 > 这 
一 行 代 码 ， 如 下 所 示 。 


<input type="button" value=" 刷 新 " onclick="show()"/> 
{@ 辐 保存 网 页 后 ， 即 可 查看 最 终 效果 。 
器 | 在 本 例 中 ,使 用 了 两 种 方法 为 对 象 增加 事件 。 在 HTML 代码 中 增加 事件 ， 即 刷新 


5 按钮 增加 的 onclick 事件 .在 JS 代码 中 增加 事件 , 即 在 JS 代码 中 为 窗口 增加 onload 
事件 。 


【 例 13.10】 设 计 程 序 ， 实 现 动 态 显 示 当 前 时 间 ， 如 图 13-14 所 示 。 
提示 : 需要 使 用 定时 函数 setTimeOut， 实 现 每 隔 一 定时 间 调用 函数 。 
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站 TI Er 万 -] 从 立 包 外 
aa = 本 
| 育 和 EE 下, Ga 


2018 年 9 月 20 日 星期 四 


16:01:12 


图 13-14 动态 时 钟 


具体 操作 步骤 如 下 : 
L 畏 创建 HTML 文件 ， 输 入 代码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 
<tit1le> 动 态 时 钟 </title> 
</head> 

<body> 

<hl id="date"></h1> 
<span id="msg"></span> 


</body> 

</html> 
为 了 保证 程序 的 正常 运行 ，<h1> 标 记 和 <span> 标 记 的 过 属性 不 能 省 咯 ， 并 且 取 什 
ES 也 不 要 修改 。 如 果 修 改 ， 后 面 的 代码 中 应 保持 一 致 。 


li 到 新 建 JavaScript 文件 ， 保 存 文件 名 为 clockjs， 保 存在 与 HIML 文件 相同 的 位 置 。 在 


clock.js 文件 中 输入 如 下 代码 。 


function showDateTime(){ 


Var sWeek=new Array ("日 ", "一 ", "二 ", "三 ", "四 ", "五 ", "六 ");// 声 明 数组 存储 一 周 七 天 


var myDate=new Date(); // 当天 的 日 期 
var sYear=myDate.getFullYear(); // 年 
var sMonth=myDate.getMonth()+1; // 月 
var sDate=myDate.getDate(); BB 


var sDay=sWeek [myDate.getDay()];  // 根据 得 到 的 数字 星期 ， 利 用 数组 转换 成 汉字 星期 


var h=myDate.getHours(); // 小 时 
var m=myDate.getMinutes(); // 分 钟 
var s=myDate.-getSeconds () ; // 秒 钟 


// 输 入 日 期 和 星期 


document .getElementById ("date") .innerHTML= (sYear + "年 " + sMonth + "月 " + 


sDate + "日 * + ”星期 ”+ sDay + "<br/>"); 
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h=formatTwoDigits (h) // 格 式 化 小 时 ， 如 果 不 足 两 位 前 补 0 
m=formatTwoDigits (m) // 格 式 化 分 钟 ， 如 果 不 足 两 位 前 补 0 
s=formatTwoDigits(s) // 格 式 化 秒 钟 ， 如 果 不 足 两 位 前 补 0 
// 显 示 时 间 
document .getElementById ("msg") .innerHTML= (imageDigits (h) + "<img 
src='images/dot.png'>" + 
imageDigits (m) + "<img src='images/dot.png'>" + 
imageDigits(s) + "<br/>"); 
setTimeout ("showDateTime ()",1000);  // 每 秒 执行 一 次 showDateTime 函 数 
} 
window.onload=showDateTime; // 页 面 的 加 载 事 件 执 行 时 ， 调 用 函数 


// 如 果 输 入 数 是 1 位 数 ， 在 十 位 数 上 补 0 

function formatTwoDigits(s) { 
if (s<10) return "0"+S7 
slse return s? 

} 


/* 将 数 转换 为 图 像 ， 注 意 ， 在 本 文件 的 相同 目录 下 已 有 0 一 9 的 图 像 文 件 ， 文 件 名 为 


0.pngv,1.png …… 以 此 类 推 */ 
function imageDigits(s) { 
Var ret= ""; 


var s= new String(s); 

for(var i=0; i<s.length; i++) { 

ret+= '<img src="images/' + s.charAt (i) + '.png">'; 
J 

return ret; 


在 clockjjs 文 件 中 ，showDateTime 函数 主要 用 于 产生 日 期 和 时 间 ， 并 且 对 日 期 和 时 
55 间 进 行 格式 化 。formatTwoDigits 函数 是 将 一 位 的 日 期 或 时 间 前 面 补 0 变 成 两 位 。 
imageDigits 是 将 数字 用 相应 图 片 代替 。 


setTimeout 是 window 对 象 的 方法 ， 按 照 指 定 的 时 间 间 隔 执行 相应 函数 ， 详 见 第 15 章 。 
tj 在 HIML 文件 的 head 部 分 ， 输 入 JavaScript 代码 ， 如 下 所 示 。 


<script src="clock.js"></script> 


13.6 专家 解 惑 


1. 如 何 产生 指定 范围 内 的 随机 整数 ? 
答 : 在 实际 开发 中 ,会 经 常 使 用 指定 范围 内 的 随机 整数 。 借 助 数学 函数 ， 总 结 以 下 两 种 指 
定 范围 内 的 随机 整数 产生 方法 。 
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(1) 产生 0 至 n 之 间 的 随机 数 : Math.floor(Math randomO*Cn+l))。 
(2) 产生 nl 至 n2 之 间 的 随机 数 : Math.floor(Math.randomO*(n2-n1))+nl。 


2. alert 弹出 窗口 内 容 的 格式 化 。 

答 : 使 用 alert 弹出 窗口 时 ， 窗 口内 容 的 显示 格式 可 以 借助 转 义 字符 进行 格式 化 。 如 果 希 
望 窗口 内 容 按 指定 位 置换 行 ， 添 加 转 义 字符 “\n”; 如 果 希 望 转 义 字符 间 有 制 表 位 间隔 ， 可 使 
用 转 义 字符 “\t”， 其 他 请 借鉴 转 义 字符 部 分 。 

3. 时 间 单 位 间 的 转换 。 

答 : 时 间 单 位 主要 包括 毫秒 、 秒 、 分 钟 、 小 时 。 时 间 的 单位 转换 如 下 : 

1000 毫秒 =1 秒 

60 秒 =1 分 钟 

60 分 钟 =1 小 时 

4. JavaScript 中 只 有 一 维 数组 吗 ? 

答 : JavaScript 支持 二 维 及 二 维 以 上 数组 。 但 是 ,在 JavaScript 中 ,二 维 及 二 维 以 上 数组 都 
需要 先 创建 一 维 数 组 ， 然 后 把 一 维 数组 中 的 元 素 当 作 一 个 数组 ， 依 次 嵌 套 ， 得 到 更 多 维 数 的 数 
组 。 


第 14 章 ” JavaScript 对 象 编程 


JavaScript 是 一 种 基于 对 象 的 语言 , 包含 了 许多 对 象 , 例如 date、 window( 窗 口 ) 和 document 
(文档 ) 对 象 等 ， 利 用 这 些 对 象 可 以 很 容易 地 实现 JavaScript 编程 速度 并 加 强 JavaScript 程序 
功能 。 


14.1 文档 对 象 模型 


HTML DOM 是 HTML Document Object Model (文档 对 象 模型 ) 的 缩写 ，HTML DOM 是 
专门 适用 于 HTML/XHTML 文档 的 对 象 模型 。 可 以 将 HTML DOM 理解 为 网 页 的 API， 它 将 网 
页 中 的 各 个 元 素 都 看 作 一 个 对 象 ， 从 而 使 网 页 中 的 元 素 也 可 以 被 计算 机 语言 获取 或 者 编辑 。 例 
如 JavaScript 就 可 以 利用 HTML DOM 动态 地 修改 网 页 。 


14.1.1 文档 对 象 模型 概述 


DOM 是 W3C 组 织 推荐 的 处 理 HTML/XML 的 标准 接口 。DOM 实际 上 是 以 面向 对 象 的 方 
式 描述 的 对 象 模型 ， 定 义 了 表示 和 修改 文档 所 需要 的 对 象 、 这 些 对 象 的 行为 和 属性 以 及 这 些 对 
象 之 间 的 关系 。 

各 种 语言 可 以 按照 DOM 规范 去 实现 这 些 接口 ， 给 出 解析 文件 的 解析 器 。DOM 规范 中 所 
指 的 文件 相当 广泛 ， 其 中 包括 XML 文件 以 及 HTML 文件 。DOM 可 以 看 作 是 一 组 API 

(Application Program Interface， 应 用 编程 接口 ) ， 把 HIML 文档 、XML 文档 等 看 作 一 个 文档 

对 象 ， 在 接口 里 面 存放 着 大 量 方法 ， 其 功能 是 对 这 些 文档 对 象 中 的 数据 进行 存 取 ， 并 且 利用 程 
序 对 数据 进行 相应 处 理 。DOM 技术 并 不 是 首先 用 于 XML 文档 ， 对 于 HTML 文档 来 说 ， 其 早 
已 可 以 使 用 DOM 来 读 取 里 面 的 数据 了 。 

DOM 可 以 由 JavaScript 实现 , 它们 两 者 之 间 的 结合 非常 紧密 , 甚至 可 以 说 如 果 没有 DOM， 
在 使 用 JavaScript 时 遇 到 的 困难 是 不 可 想象 的 ， 因 为 我 们 每 解析 一 个 节点 一 个 元 素 都 要 耗费 很 
多 精力 ，DOM 本 身 是 设计 为 一 种 独立 的 程序 语言 ， 以 一 致 的 API 存 取 文件 的 结构 表述 。 

在 使 用 DOM 进行 解析 HIML 对 象 的 时 候 , 首先 在 内 存 中 构建 起 一 棵 完整 的 解析 树 , 借 此 
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实现 对 整个 XML 文档 的 全 面 、 动 态 访 问 。 也 就 是 说 , 它 的 解析 是 有 层次 的 , 即将 所 有 的 HTML 
中 的 元 素 都 解析 成 树 上 层次 分 明 的 节点 ， 然 后 我 们 可 以 对 这 些 节 点 执行 添加 、 删 除 、 修 改 及 查 
看 等 操作 。 

目前 W3C 提出 了 三 个 DOM 规范 ， 分 别 是 DOM Levell、DOM Level2、DOM Level3。 


14.1.2 在 DOM 模型 中 获得 对 象 的 方法 


在 DOM 结构 中 ,其 根 结 点 由 document 对 象 表示 , 对 于 HTML 文档 而 言 ,实际 上 就 是 <html> 
元 素 。 当 使 用 JavaScript 脚本 语言 操作 HTML 文档 时 , document 指向 整个 文档 , <body>、<table> 
等 结 点 类 型 即 为 Element，Comment 类 型 的 结 点 则 是 指 文档 的 注释 。 在 使 用 DOM 操作 XML 
和 HTML 文档 时 ， 经 常 要 使 用 document 对 象 。document 对 象 是 一 棵 文档 树 的 根 ， 该 对 象 可 为 
我 们 提供 对 文档 数据 的 最 初 〈 或 最 顶层 ) 的 访问 入 口 。 


【 例 14.1】 “实例 文件 : chl4\14.1.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 解 析 HTML 对 象 </title> 
<script type="text/javascript"> 
window.onload = function(){ 
Var zhwHtml = document .documentElement; 
// 通 过 docuemnt .documentElement 获 取 根 节点 
alert (zhwHtml .nodeName) ; // 打 印 HTML 节 点 名 称 
var zhwBody = document .body; // 获 取 body 标 签 节点 
alert (zhwBody.nodeName) ; // 打 印 BODY 节 点 的 名 称 
var fH = zhwBody.firstchild; // 获 取 body 的 第 一 个 子 节点 
alert (fH+"body 的 第 一 个 子 节点 "); 
var 1H = zhwBody.1lastchild; // 获 取 body 的 最 后 一 个 子 节点 
alert (1H+"body 的 最 后 一 个 子 节点 "); 
var ht = document .getElementById ("zhw"); // 通 过 id 获取 <h1> 
alert (ht.nodeName) :7 
var text = ht.childNodes; 
alert (text.length); 
Var txt = ht.firstchild; 
alert (txt .nodeName); 
alert (txt .nodeValue); 
alert (ht.innerHTML); 
alert (ht.innerText+"Text"); 
| 
</script> 
</head> 
<body> 
<hl id="zhw"> 我 是 一 个 内 容 节 点 </h1> 
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</body> 

</html> 

在 上 面 的 代码 中 ， 首 先 获取 HTML 文件 的 根 节 点 ， 即 使 用 “document.documentElement” 
语句 获取 ， 下面 分 别 获取 了 body 节点 、body 的 第 一 个 节点 、 最 后 一 个 子 节 点 。 语句 “document. 
getElementById("zhw")” 表 示 获 得 指定 节点 ， 并 输出 节点 名 称 和 节点 内 容 。 

在 正 11.0 中 的 浏览 效果 如 图 14-1 所 示 , 可 以 看 到 当 页 面 显示 的 时 候 , JavaScript 程序 会 依 
次 将 HTML 的 相关 节点 输出 ， 例 如 输出 HTML、Body 和 HI 等 节点 。 


我 是 一 个 内 容 节点 


率 白 网 页 的 消息 


外 lobject Tealbody 的 第 一 个 于 节 室 


医 到 可 


图 14-1 输入 DOM 对 象 中 节点 


14.1.3 ”事件 驱动 


JavaScript 是 基于 对 象 (Object Based) 的 语言 。 基 于 对 象 的 基本 特征 就 是 采用 事件 驱动 
(Event Driver) ， 它 是 在 用 图 形 界面 的 环境 下 使 得 一 切 输入 变 得 简单 化 。 通常 鼠标 或 热 键 的 动 
作 称 为 事件 (Event) ,而 由 鼠标 或 热 键 引发 的 一 连 串 程序 的 动作 称 为 事件 驱动 (Event Driver) 。 
对 事件 进行 处 理 程序 或 函数 称 为 事件 处 理 程序 (Event Handler) 。 

要 使 事件 处 理 程序 能 够 启动 ， 必 须 先 告诉 对 象 如 果 发 生 了 什么 事情 需要 启动 什么 处 理 程 
序 ， 否 则 这 个 流程 就 不 能 进行 下 去 。 事 件 的 处 理 程序 可 以 是 任意 JavaScript 语句 ， 但 是 一 般 用 
特定 的 自 定义 函数 〈function〉 来 处 理事 情 。 

事件 定义 了 用 户 与 页 面 交 互 时 产生 的 各 种 操作 ， 例 如 单 击 超 链 接 或 按钮 时 ， 就 会 产生 一 个 
单 击 (click) 事件 ，click 事件 触发 标记 中 的 onclick 事件 处 理 。 浏 览 器 在 程序 运行 的 大 部 分 时 
间 都 等 待 交互 事件 的 发 生 ， 并 在 事件 发 生 时 自动 调用 事件 处 理 函 数 完成 事件 处 理 过 程 。 

事件 不 但 可 以 在 用 户 交互 过 程 中 产生 ， 而 且 浏览 器 自己 的 一 些 动作 也 可 以 产生 。 例 如 ， 当 
载 入 一 个 页 面 时 就 会 发 生 load 事件 ， 印 载 一 个 页 面 时 就 会 发 生 unload 事件 。 归 纳 起 来 ， 必 须 
使 用 的 事件 有 以 下 三 大 类 : 
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@ 引起 页 面 之 间 跳 转 的 事件 ， 主 要 是 超 链接 事件 。 
@ 事件 浏览 器 自己 引起 的 事件 。 
@ 事件 在 表单 内 部 同 界面 对 象 的 交互 。 


【 例 14.2】 实例 文件 ，ch14\14.2.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title>JavaScript 事 件 驱 动 </title> 
<script language="javascript"> 
function countTotal(){ 
Var elements = document .getElementsByTagName ("input"); 
window.alert ("input 类 型 节点 总 数 是 :" + elements.length); 
于 
function anchorElement (){ 
Var element = document .getElementById("ss"); 
window.alert ("按钮 的 value 是 :" + element.value); 
} 
</script> 
</head> 
<body> 
<table width="364" border="1l" cellpadding="0" cellspacing="0"> 
<form action="" name="forml" method="post"> 
<tr> 
<td width="20%">&gnbsp; 用 户 名 </td> 
<td width="80$">&nbsp;<input type="text" name="inputl" value=""></td> 
</tr> 
<tr> 
<td>gnbsp; 密 码 </td> 
<td>gnbsp;<input type="password" name="passwordl" value=""></td> 
</tr> 
EP 
<td>gnbsp; </td> 
<td><input id="ss" type="submit" name="Submit" value=" 提 交 "></td> 
</tr> 
</form> 
</table> 
<a href="javascript:void(0);" onClick="countTotal ();"> 
统计 input 子 节点 总 数 </a> 
<a href="javascript:void(0);" onClick="anchorElement () ;"> 获 取 提 交 按 钮 内 容 
</a> 
</body> 
</html> 


在 上 面 的 HTML 代码 中 创建 了 两 个 超 链接 , 并 给 这 两 个 超 链接 添加 了 单 击 事件 , 即 onclick 
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事件 。 当 单 击 超 链 接 时 会 触发 countTotal 和 anchorElementO 函 数 。 在 JavaScript 代码 中 ， 创 建 
了 countTotal 和 anchorElement() 函 数 。countTotal 函数 中 使 用 “document.getElementsByTagName 
("input");” 语 句 获取 节点 名 称 为 input 的 所 有 元 素 ， 并 将 它 存储 到 一 个 数组 中 ， 然 后 将 这 个 数 
组 长 度 输出 ; 在 anchorElement0 函 数 中 ， 使 用 “document.getElementById("submit")” 获 取 按 钮 
节点 对 象 ， 并 将 此 对 象 的 值 输出 。 

在 正 11.0 中 的 浏览 效果 如 图 14-2 所 示 ， 可 以 看 到 当 页 面 显 示 的 时 候 ， 当 单 击 【统计 input 
子 节 点 总 数 】 和 【获取 提交 按钮 内 容 】 超 链接 时 ， 会 分 别 显示 input 的 子 节点 数 和 提交 按钮 的 
value 内 容 。 从 执行 结果 来 看 ， 当 单 击 超级 链接 时 ,会 触发 事件 处 理 程序 ， 即 调用 JavaScript 函 
数 。JavaScript 函数 执行 时 ， 会 根据 相应 程序 代码 完成 相关 操作 ， 例 如 本 实例 的 统计 节点 数 和 
获取 按钮 value 内 容 等 。 


- DO x 
局 DA: 本 书 源 代 码 \code\ 六 国 ”0 搜索 .…. od 
局 Javascript 事 件 狗 动 x EE 
育 名 E 度 -下 , frmn 半 
统计 input 
来 自 网 页 的 消息 容 来 自 网 页 的 消息 x 
企 input 尖 再 节 点 总 数 是 :3 企 按钮 的 value 是 提交 


图 14-2 事件 驱动 显示 


14.2 ”窗口 对 象 


window 对 象 在 客户 端 JavaScript 中 扮演 重要 的 角色 , 既是 客户 端 程序 的 全 局 (默认 ) 对 象 ， 
还 是 客户 端 对 象 层次 的 根 。 它 是 JS 中 最 大 的 对 象 ， 描 述 的 是 一 个 浏览 器 窗口 ， 一 般 要 引用 它 
的 属性 和 方法 时 ， 不 需要 用 “Window.XXX” 这 种 形式 ， 而 是 直接 使 用 “XXX”。 一 个 框架 页 
面 也 是 一 个 窗口 。Window 对 象 表 示 浏 览 器 中 打开 的 窗口 。 


14.2.1 窗口 概述 


window 对 象 表示 一 个 浏览 器 窗口 或 一 个 框架 。 在 客户 端 JavaScript 中 ，window 对 象 是 全 
局 对 象 ， 所 有 的 表达 式 都 在 当前 的 环境 中 计算 。 也 就 是 说 ， 要 引用 当前 窗口 根本 不 需要 特殊 的 
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语法 ， 可 以 把 那个 窗口 的 属性 作为 全 局 变量 来 使 用 。 例 如 ， 可 以 只 写 document， 而 不 必 写 
window.document。 同 样 ， 可 以 把 当前 窗口 对 象 的 方法 当 作 函 数 来 使 用 ， 如 只 写 alert0， 而 不 必 


写 window.alert()。 


window 对 象 还 实现 了 核心 JavaScript 所 定义 的 所 有 全 局 属性 和 方法 。window 对 象 的 
window 属性 和 self 属性 引用 的 都 是 它 自己 。window 对 象 属性 如 表 14-1 所 示 。 


属性 名 称 

closed 

defaultStatus, status 
document 

frames[] 

history 

innerHight, innerWidth, 
outerHeight, outerWidth 
location 
locationbar,menubar, 
scrollbars,statusbar,toolbar 
name 


opener 


pageXOffset, pageY Offset 


表 14-1 window 对 象 属性 
说 明 
一 个 布尔 值 ， 当 窗口 被 关闭 时 此 属性 为 tue， 默认 为 false 
一 个 字符 串 ， 用 于 设置 在 浏览 器 状态 栏 显 示 的 文本 
对 document 对 象 的 引用 ， 该 对 象 表示 在 窗口 中 显示 的 HTML 文件 
window 对 象 的 数组 ， 代 表 窗 口 的 各 个 框架 
对 history 对 象 的 引用 ， 该 对 象 代表 用 户 浏览 器 窗口 的 历史 
分 别 表 示 窗 口 的 内 外 尺寸 


对 location 对 象 的 引用 ， 该 对 象 代表 在 窗口 中 显示 的 文档 的 URL 

对 窗口 中 各 种 工具 栏 的 引用 ， 像 地 址 栏 、 工 具 栏 、 菜 单 栏 、 滚 动 条 等 。 
这 些 对 象 分 别 用 来 设置 浏览 器 窗口 中 各 个 部 分 的 可 见 性 

窗口 的 名 称 ， 可 被 HTML 标记 <a> 的 target 属性 使 用 

对 打开 当前 窗口 的 window 对 象 的 引用 。 如 果 当 前 窗口 被 用 户 打开 ， 则 
它 的 值 为 null 

在 窗口 中 滚动 到 右边 和 下 边 的 数量 


parent 如 果 当 前 的 窗口 是 框架 ， 它 就 是 对 窗口 中 包含 这 个 框架 的 引用 

self 自 引用 属性 ， 是 对 当前 window 对 象 的 引用 ， 与 window 属性 相同 

top 如 果 当 前 窗口 是 一 个 框架 ， 那 么 它 就 是 对 包含 这 个 框架 顶级 窗口 的 
window 对 象 的 引用 。 注 意 ， 对 于 伐 套 在 其 他 框架 中 的 框架 来 说 ，top 
不 等 同 于 parent 

window 自 引用 属性 ， 是 对 当前 window 对 象 的 引用 ， 与 self 属性 相同 


window 对 象 的 常用 函数 如 表 14-2 所 示 。 
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表 14-2 window 对 象 函数 


函数 名 称 说 明 

close() 关闭 窗口 

find0, home0, print0, stopO ”| 执行 浏览 器 查找 、 主 页 、 打 印 和 停止 按钮 的 功能 ， 就 像 用 户 单 击 了 窗口 
中 这 些 按 钮 一 样 


focus(), blur0 请 求 或 放弃 窗口 的 键盘 焦点 。focus0 函 数 还 将 把 窗口 置 于 最 上 层 ， 使 窗 
口 可 见 


resizeBy(), resizeTo() 调整 窗口 大 小 


scrollBy(), scrollTo() 滚动 窗口 中 显示 的 文档 
setInterval(), clearInterval0 设置 或 者 取消 重复 调用 的 函数 ， 该 函数 在 两 次 调用 之 间 有 指定 的 延迟 


setTimeout(), clearTimeout() 设置 或 者 取消 在 指定 的 若干 秒 后 调用 一 次 的 函数 


【 例 14.3】 “实例 文件 : chl4\14.3.html) 


<!DOCTYPE html> 

<html> 

<head> 
<title>window 属 性 </title> 
</head> 

<body> 

<script language=”JavaScript”> 
function shutwin(){ 
window.close(); 

return;} 

</script> 

<a href=”javascript:shutwin();”> 关 闭 本 窗口 </a> 
</body> 

</html> 


在 上 面 的 代码 中 ， 创 建 一 个 超级 链接 并 为 超级 链接 添加 了 一 个 事件 ， 即 单 击 超级 链接 时 会 
调用 函数 shutwin。 在 函数 shutwin 中 ， 使 用 了 window 对 象 的 函数 close， 关 闭 当前 窗口 。 

在 正 11.0 中 的 浏览 效果 如 图 14-3 所 示 ， 当 单 击 超级 链接 【关闭 本 窗口 】 时 ， 会 弹出 一 个 
对 话 框 询问 是 否 关 闭 当 前 窗口 ， 单 击 【 是 】 按 钮 会 关闭 当前 窗口 ， 否 则 不 关闭 当前 窗口 。 
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咎 ”D:\ 本 书 源 代码 \code 详 图 ~ 作 搜索 
总 window 尾 性 x IO 
请 各 百度 -下 ,你 和 0 道 


关闭 本 窗口 


Windows Internet Explorer 


你 查看 的 网 页 正在 试图 关闭 窗口 . 


是 否 关闭 此 窗口 ? 


Cm 


图 14-3 浏览 效果 


14.2.2 ”对 话 框 

对 话 框 的 作用 就 是 和 浏览 者 进行 交流 ， 有 提示 、 选 择 和 获取 信息 的 功能 。JavaScript 提供 
了 三 个 标准 的 对 话 框 ， 分 别 是 弹出 对 话 框 、 选 择 对 话 框 和 输入 对 话 框 。 这 三 个 对 话 框 都 是 基于 
window 对 象 产生 的 ， 即 作为 window 对 象 的 方法 而 使 用 的 。 

window 对 象 中 的 对 话 框 如 表 14-3 所 示 。 


表 14-3 ”window 对 象 对 话 框 


弹出 一 个 只 包含 【确定 】 按 钮 的 对 话 框 
弹出 一 个 包含 【确定 】 和 【取消 】 按 钮 的 对 话 框 ， 要 求 用 户 做 出 选择 。 用 户 如 果 单 击 
【确定 】 按 钮 ， 就 返回 true 值 ， 如 果 单 击 【 取 消 】 按 钮 ， 就 返回 false 值 
弹出 一 个 包含 【确定 】、【 取 消 】 按 钮 和 一 个 文本 框 的 对 话 框 ， 要 求 用 户 在 文本 框 中 
输入 一 些 数据 。 用 户 如 果 单 击 【确定 】 按 钮 ， 就 返回 文本 框 里 已 有 的 内 容 ， 如 果 单 击 
【取消 】 按 钮 ， 就 返回 null 值 ， 如 果 指定 < 初始 值 >， 那 么 文本 框 里 会 有 默认 值 


局 


【 例 14.4】 (实例 文件 : chl4\14.4.html) 


<!DOCTYPE html> 
<html> 
<head> 
<script type=”text/javascript”> 
function display alert() 
| 
alert ("我 是 弹出 对 话 框 ") 
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} 
function disp prompt () 
1 
var name=prompt ("请 输入 名 称 ","") 
if (name!=null && name!="") 
1 
document .write (" 你 好 "+ name + "!") 
} 
} 
function disp confirm() 
{ 
var r=confirm(" 按 下 按钮 ") 
if (r==true) 
上 
document .write (" 单 击 确定 按钮 ") 
i 
else 
1 
document .write (" 单 击 返 回 按钮 ") 
下 
} 
</script> 
</head> 
<body> 
<input type="button" onclick="display alert()" value=" 弹 出 对 话 框 "” /> 
<input type="button" onclick="disp prompt()" value=" 输 入 对 话 框 ” /> 
<input type="button" onclick="disp confirm()" value=" 选 择 对 话 框 " /> 
</body> 
</html> 


在 HIML 代码 中 ， 创 建 了 三 个 表单 按钮 ， 并 分 别 为 三 个 按钮 添加 了 单 击 事件 ， 即 单 击 不 
同 的 按钮 时 调用 不 同 的 JavaScript 函数 。 在 JavaScript 代码 中 ， 创 建 了 三 个 JavaScript 函数 ， 这 
三 个 函数 分 别 调用 window 对 象 的 alert、confirm 和 prompt 函数 创建 不 同形 式 的 对 话 框 。 

在 正 11.0 中 的 浏览 效果 如 图 14-4 所 示 ， 当 单 击 三 个 按钮 时 会 显示 不 同 的 对 话 框 类 型 ， 例 
如 弹出 对 话 框 、 选 择 对 话 框 和 输入 对 话 框 。 


eT RY EE 四 
[二 


图 14-4 对话 框 显示 
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14.2.3 ”窗口 操作 

上 网 的 时 候 会 遇 到 这 样 的 情况 ， 当 进入 首页 或 者 按 一 个 链接 或 按钮 时 ， 会 弹出 一 个 窗口 ， 
通常 窗口 里 会 显示 一 些 注 意 事 项 、 版 权 信息 、 警 告 、 欢 迎 光 顾 之 类 的 话 或 者 其 他 需要 特别 提示 
的 信息 。 实 现 弹出 窗口 非常 简单 ， 需 要 使 用 window 对 象 的 open 函数 。 

open0 函 数 提供 了 很 多 可 供用 户 选择 的 参数 ， 用 法 是 : 


open (<URIL 字 符 串 >， < 窗口 名 称 字符 串 >， < 参数 字符 串 >) ; 
其 中 ， 各 个 参数 的 含义 如 下 : 


@ <URL 字符 串 > 指定 新 窗口 要 打开 网 页 的 URL 地 址 ， 如 果 为 空 (…) ， 则 不 打开 

任何 网 页 。 

@ < 窗口 名 称 字符 串 > 指定 被 打开 新 窗口 的 名 称 ( window.name ), 可 以 使 用 “ top” 
“blank” 等 内 置 名 称 。 这 里 的 名 称 跟 “<a href="..."target="...">” 里 的 
“target” 属 性 是 一 样 的 。 

@ ”< 参数 字符 串 > 指定 被 打开 新 窗口 的 外 观 。 如 果 只 需要 打开 一 个 普通 窗口 ， 该 字 

符 串 留 空 (' ') ， 如 果 要 指定 新 窗口 ， 就 在 字符 串 里 写 上 一 到 多 个 参数 ， 参 数 之 
间 用 去 号 隔 开 。 


open(0) 函 数 第 3 个 参数 有 如 下 几 个 可 选 值 : 


top=0， 窗 口 顶部 离开 屏幕 项 部 的 像素 数 。 

left-0， 窗 口 左 端 离开 屏幕 左 端 的 像素 数 。 

width=400， 窗 口 的 宽度 。 

height=100， 窗 口 的 高 度 。 

menubar=yeslno， 窗 口 是 否 有 菜单 ， 取 值 yes 或 no。 
toolbar= yeslno， 窗 口 是 否 有 工具 栏 ， 取 值 yes 或 no。 
location= yeslIno， 窗 口 是 否 有 地 址 栏 ， 取 值 yes 或 no。 
directories= yeslno， 窗 口 是 否 有 连接 区 ， 取 值 yes 或 no。 
scrollbars=...， 窗 口 是 否 有 滚动 条 ， 取 值 yes 或 no。 
status= yeslno， 窗 口 是 否 有 状态 栏 ， 取 值 yes 或 no。 
resizable= yeslno， 窗 口 是 否 可 以 调整 大 小 ， 取 值 yes 或 no。 


例如 ， 打 开 一 个 宽 为 500、 高 为 200 的 窗口 ， 使 用 语句 : 
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open('',' blank','width=500,height=200,menubar=no, toolbar=no, 
location=no,directories=no, status=no, scrollbars=yes, resizable=yes') 


【 例 14.5】〔 实 例文 件 ，ch14\14.5.htnl) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 打 开 新 窗口 </title> 

</head> 

<body> 

<script language=”JavaScript”> 

二 

function setWindowStatus () 

{ 

window.status="Window 对 象 的 简单 应 用 案例 ， 这 里 的 文本 是 由 status 属 性 设置 的 。"; 

} 

function NewWindow() { 
msg=open ("", "DisplayWindow", "toolbar=no, directories=no,menubar=no"); 
msg.document .write ("<HEAD><TITLE> 新 窗口 </TITLE></HEAD>"); 
msg.document .write ("<CENTER><h2> 这 是 由 Window 对 象 的 0pen 方 法 所 打开 的 新 窗 

口 !</h2></CENTER>") 7 

</script> 

<body onload="setWindowStatus () "> 

<input type="button" name="Buttonl" value=" 打 开 新 窗口 " 

onclick="NewWindow()"> 
</body> 
</html> 


在 代码 中 ， 使 用 onload 加 载 事 件 ， 调 用 JavaScript 函数 setWindowStatus 来 设置 状态 栏 的 
显示 信息 。 创建 了 一 个 按钮 并 为 按钮 添加 了 单 击 事件 , 在 NewWindow 函数 中 使 用 open 打开 了 
一 个 新 的 窗口 。 

在 下 11.0 中 的 浏览 效果 如 图 14-5 所 示 ， 当 单 击 页 面 中 的 【打开 新 窗口 】 按 钮 时 ， 会 显示 
新 窗口 。 在 新 窗口 中 没有 显示 地 址 栏 和 菜单 栏 等 信息 。 


次 口 x 
司 Di 本 书 源 代码 \code 洲 图 ”已 御 案 . Dp- 
| 所 后 * 同 
遍 分 百 压 一 下 ， 你 各 0 下 
| 
息 疡 ED -Internet Explorer 宫 x 


| 这 是 由 Window 对 象 的 Open 方 法 所 打开 的 新 窗口 ! 


图 14-5 ”使 用 open 函数 打开 新 窗口 
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14.3 ”文档 对 象 


document 对 象 是 客户 端 使 用 最 多 的 JavaScript 对 象 ， 除 了 常用 的 write0 函 数 之 外 ， 还 定义 
了 文档 整体 信息 属性 ， 如 文档 URL、 最 后 修改 日 期 、 文 档 要 链接 到 的 URL、 显 示 颜 色 等 。 


14.3.1 文档 的 属性 


window 对 象 具有 document 属性 , 该 属性 表示 在 窗口 中 显示 HTML 文件 的 document 对 象 。 
客户 端 JavaScript 可 以 把 静态 HTML 文档 转换 成 交互 式 的 程序 ， 因 为 document 对 象 提供 交互 
访问 静态 文档 内 容 的 功能 ,除了 提供 文档 整体 信息 的 属性 外 , document 对 象 还 有 很 多 重要 属性 ， 
这 些 属性 提供 文档 内 容 的 信息 。 

document 对 象 有 很 多 函数 ， 其 中 包括 以 前 程序 中 经 常 看 到 的 documentwrite0， 如 表 14-4 


折 示 。 

表 14-4 document 对 象 函数 
函数 名 称 说 明 
close0) 关闭 或 结束 open0 函 数 打开 的 文档 
open0) 产生 一 个 新 文档 ， 并 清除 已 有 文档 的 内 容 
write() 输入 文本 到 当前 打开 的 文档 
writeln() 输入 文本 到 当前 打开 的 文档 ， 并 添加 一 个 换行 符 
document.createElement(Tag) 创建 一 个 html 标记 对 象 
document.getElementById(ID) 获得 指定 ID 值 的 对 象 
document.getElementsByName(Name) 获得 指定 Name 值 的 对 象 


表 14-5 中 列 出 了 document 对 象 中 定义 的 常用 属性 。 
表 14-5 document 对 象 属性 


属性 名 称 说 明 

alinkColor , linkColor，| 这 些 属性 描述 了 超 链接 的 颜色 。linkColor 指 未 访问 过 的 链接 的 正常 颜色 ， 

vlinkColor VlinkColor 指 访问 过 的 链接 的 颜色 ，alinkColor 指 被 激活 的 链接 的 颜色 。 这 些 
属性 对 应 于 HTML 文档 中 body 标记 的 alink、link 和 vlink 属性 

anchors[] anchor 对 象 的 一 个 数组 ， 保 存 着 代表 文档 中 锚 的 集合 

applets[] applet 对 象 的 一 个 数组 ， 代 表 文档 中 的 Java 小 程序 

bgColor, fgColor 文档 的 背景 色 和 前 景色 ,这 两 个 属性 对 应 于 HTML 文档 中 body 标记 的 bgcolor 


和 text 属性 
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( 续 表 ) 
属性 名 称 说 明 
cookie 一 个 特殊 属性 ， 人 允许 JavaScript 脚本 读 写 HTTP cookie 
domain 该 属性 使 处 于 同一 域 中 相互 信任 的 Web 服务 器 在 网 页 间 交 互 时 能 协同 忽略 某 
项 案例 性 限制 
forms[] form 对 象 的 一 个 数组 ， 代 表 文 档 中 form 标记 的 集合 
images[] image 对 象 的 一 个 数组 ， 代 表 文 档 中 <img> 标 记 集合 
lastModified 一 个 字符 串 ， 包 含 文档 的 最 后 修改 日 期 
links[] link 对 象 的 一 个 数组 ， 代 表 文 档 的 链接 <a> 标 记 的 集合 
location 等 价 于 属性 URL 
referrer 文档 的 URL， 包 含 把 浏览 器 带 到 当前 文档 的 链接 
title 当前 文档 的 标题 ， 即 <tile> 和 </title> 之 间 的 文本 
URL -个 字符 串 。 声 明 装 载 文件 的 URL， 除 非 发 生 了 服务 器 重 定向 ， 和 否则 该 属性 


的 值 与 window 对 象 的 Location.href 相同 


-个 HTML 文档 中 的 每 个 <form> 标 记 都 会 在 document 对 象 的 Forms[] 数 组 中 创建 一 个 元 
素 ， 同 样 ， 每 个 <img> 标 记 也 会 创建 一 个 images[] 数 组 的 元 素 。 同 时 ， 这 一 规则 还 适用 于 <a> 和 
<applet> 标 记 ， 它 们 分 别 对 应 于 Links[] 和 applets[] 数 组 的 元 素 。 

在 一 个 页 面 中 ，document 对 象 具有 form、image 和 applet 子 对 象 。 通 过 在 对 应 的 HTML 
标记 中 设置 name 属性 ， 就 可 以 使 用 名 字 来 引用 这 些 对 象 。 包 含有 name 属性 时 ， 它 的 值 将 被 
用 作 document 对 象 的 属性 名 来 引用 相应 的 对 象 。 


【 例 14.6】〔 实 例文 件 : ch14\14.6.html) 
<!DOCTYPE html> 
<html> 
<head> 
<title> 使 用 document 属 性 </title> 
</head> 
<body> 
<div> 
<H2> 在 文本 框 中 输入 内 容 ， 注 意 第 二 个 文本 框 变化 : </H2> 
<form> 
内 容 : <input type=text 
onChange="document .my.elements[0] .value=this.value;" > 
</form> 
<form name="my"> 
结果 : <input type=text 
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onChange="document .forms [0] .elements [0] .value=this.value;"> 

</form> 

</div> 

</body> 

</html> 

在 上 面 的 代码 中 ，document.forms[0] 引 用 了 当前 文档 中 的 第 一 个 表单 对 象 ，document.my 
则 引用 了 当前 文档 中 name 属性 为 my 的 表单 。 完整 的 document.forms[0].elements[0].value 引用 
了 第 一 个 表单 中 第 一 个 文本 框 的 值 , 而 document.my.elements[0].value 引用 了 名 为 my 的 表单 中 
第 一 个 文本 框 的 值 。 

在 正 11.0 中 的 浏览 效果 如 图 14-6 所 示 。 当 在 第 一 个 文本 框 输入 内 容 时 ， 鼠 标 放 到 第 二 个 
文本 框 时 ， 会 显示 第 一 个 文本 框 输入 的 内 容 。 在 第 一 个 表单 的 文本 框 中 输入 内 容 ， 然 后 触发 了 
onChange 事件 〈 当 文本 框 的 内 容 改 变 时 触发 》， 使 第 二 个 文本 框 中 的 内 容 与 此 相同 。 

| 站 D:\ 本 书 洒 代 码 Ycode 湛 轩 ”| 搜索. - 


| 多 document 属 性 使 用 
| 音 4 下 , 人 Wn 道 


在 文本 框 中 输入 内 容 ， 注 意 第 二 个 文本 框 变化 : 


内 容 ，|[ 坦 花 秋月 


结 来 : [ERERRL 了 


图 14-6 document 对 象 使 用 


14.3.2 文档 中 的 图 片 


如 果 要 使 用 JavaScript 代码 对 文档 中 的 图 像 标 记 <img> 进 行 操作 ， 需 要 使 用 到 document 对 
象 。document 对 象 提 供 了 多 种 访问 文档 中 标记 的 方法 ， 下 面 以 图 像 标记 为 例 。 


(1) 通过 集合 引用 


document .images // 对 应 页 面 上 的 <img> 标 记 
document .images .length // 对 应 页 面 上 <img> 标 记 的 个 数 
document .images [0] // 第 1 个 <img> 标 记 

document .images [i] // 第 i-1 个 <img> 标 记 


(2) 通过 name 属性 直接 引用 
<img name="oImage"> 
<script language="javascript"> 
document .images .oImage //document .images .name 属 性 
</script> 
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(3) 引用 图 片 的 src 属性 


document .images .oImage.src //document. images name 属 性 3353C 


【 例 14.7】〔 实 例文 件 ， chl4\14.7.html) 


<html> 
<head> 
<title> 文 档 中 的 图 片 </title> 
</head> 
<body> 
<p> 下 面 显 示 了 一 张 图 片 </p> 
<img name=imagel width=200 height=120> 
<script language="javascript"> 
Var imagel 
imagel=new image () 
document .images.imagel .src="12.jpg" 
</script> 
</body> 
</html> 


在 上 面 的 代码 中 ， 首 先 创建 了 一 个 <img> 标 记 ， 此 标记 没有 使 用 src 属性 。 在 JavaScript 代 
码 中 ， 创 建 了 一 个 imagel 对 象 ， 该 对 象 使 用 new image 函数 声明 。 然 后 使 用 document 属性 设 
置 <img> 标 记 的 src 属性 。 

在 正 11.0 中 的 浏览 效果 如 图 14-7 所 示 ， 显 示 一 个 图 片 和 一 段 信息 。 

- 口 x 
可 D:\ 本 书 源 代 码 vcode\ 浊 国 ~ 中 搜索. 
后 文档 中 的 图 片 x 罗 
请 省 百度 下， 你 就 知道 
下 面 显示 了 一 张 图 片 


各 


图 14-7 在 文档 中 设置 图 片 


14.3.3 ”文档 中 的 超 链接 


文档 对 象 document 中 有 一 个 links 属性 ， 该 属性 返回 页 面 中 所 有 链接 标记 所 组 成 的 数组 ， 
同样 可 以 用 于 进行 一 些 通用 的 链接 标记 处 理 。 例 如 ， 在 Web 标准 的 strict 模式 下 ， 链 接 标记 的 
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target 属性 是 被 禁止 的 ， 若 使 用 则 无 法 通过 W3C 关于 网 页 标准 的 验证 。 若 要 在 符合 strict 标准 
的 页 面 中 能 让 链接 在 新 建 窗口 中 打开 ， 则 可 使 用 如 下 代码 。 


var links=document .links; 

for (var i=0;i<links.length;i++){ 
links[i] .target=" blank"; 

} 


【 例 14.8】 《实例 文件 : chl4\14.8html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 显 示 页 面 的 所 有 链接 </title> 

<script language="JavaScript1.2"> 

function extractlinks(){ 

Var links=document .all.tags ("A") 

var links=document .links; 

Var total=links.length 

var win2=window.open("","","menubar,scrollbars, toolbar") 

win2.document .write ("<font size='2'> 一 共有 "+total+" 个 链接 </font><br />") 

for (i=0;i<total;i++) { 

win2.document .write("<font size='2'>"+links[i] .outerHTML+"</font><br 
Wl 


</script> 

</head> 

<body> 

<input type="button" onclick="extractlinks()" value=" 显 示 所 有 的 链接 "> 
<p> </p> 

<p><a target=" blank" href="http://www.sohu.com/"> 搜 狐 </a></p> 
<p><a target=" blank" href="http://www.sina.com/"> 新 浪 </a></p> 
<p><a target=" blank" href="http://www.163.com/">163</a></p> 
<p> 链 接 1</p> 

<p> 链 接 1</p> 

<p> 链 接 1</p> 

<p> 链 接 1</p> 

</body> 

</html> 


在 HIML 代码 中 ， 创 建 了 多 个 标记 ， 例 如 表单 标记 input、 段 落 标记 和 三 个 超 链接 标记 。 
在 JavaScript 函数 中 ， 函 数 extractlinks 的 功能 就 是 获取 当前 页 面 中 的 所 有 超 链接 ， 并 在 新 窗口 
中 输出 。 其 中 ，“document.links” 就 是 获取 当前 页 面 所 有 链接 并 存储 到 数组 中 ， 其 功能 和 语句 
“document. all.tags("A")” 功 能 相同 。 

在 正 11.0 中 的 浏览 效果 如 图 14-8 所 示 ， 在 页 面 中 单 击 【显示 所 有 的 链接 】 按 钮 ， 会 弹出 
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一 个 新 的 窗口 ， 并 显示 原来 窗口 中 所 有 的 超 链接 ， 如 图 14-9 所 示 。 单 击 按钮 时 就 触发 了 一 个 
按钮 单 击 事件 ， 并 调用 了 事件 处 理 程序 ， 即 函数 。 


日 x 
癌 D: 本 书 源 代 码 \codeWW 独 一 
各 显示 页 面 的 所 有 链 皖 
部 各 百度 -下 ,人 Sx 


显示 所 有 的 链接 


图 14-8 ”获取 所 有 链接 图 14-9 超级 链接 新 窗口 


14.4 ”表单 对 象 


每 一 个 form 对 象 都 对 应 着 HTML 文档 中 的 一 个 <form> 标 记 。 通 过 form 对 象 可 以 获得 表 
单 中 的 各 种 信息 ， 也 可 以 提交 或 重 置 表单 。 由 于 表单 中 还 包括 了 很 多 表单 元 素 ， 因 此 ，form 对 
象 的 子 对 象 还 可 以 对 这 些 表单 元 素 进行 引用 ， 以 完成 更 具体 的 应 用 。 


14.4.1 form 对 象 


form 对 象 代表 一 个 HIML 表单 。 在 HTML 文档 中 <form> 标 记 每 出 现 一 次 ，form 对 象 就 
会 被 创建 。 在 使 用 单独 的 表单 form 对 象 之 前 ， 首 先 要 引用 form 对 象 。form 对 象 由 网 页 中 的 
<form></form> 标记 对 创建 。 相 似 的 ，form 里 边 的 元 素 也 是 由 <input> 等 标记 创建 的 ， 它 们 
被 存放 在 数组 elements 中 。 

一 个 表单 隶属 于 一 个 文档 , 对 于 表单 对 象 的 引用 可 以 通过 使 用 隶属 文档 的 表单 数组 进行 引 
用 ， 即 使 在 只 有 一 个 表单 的 文档 中 ， 表 单 也 是 一 个 数组 的 元 素 ， 其 引用 形式 如 下 : 


Document .forms (0) 


需要 注意 的 是 , 表单 数组 引用 采用 的 是 form 的 复数 形式 forms, 数组 的 下 标 总 是 从 0 开始 。 
在 对 表单 命名 后 ， 也 可 以 简单 地 通过 名 称 进行 引用 ， 比 如 表单 的 名 称 是 MForm， 则 引用 
形式 如 下 : 


Document .MForm 
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【 例 14.9】〔 实 例文 件 : ch14\14.9html) 

<!DOCTYPE html> 

<html> 

<head> 

<title>form 表 单 长 度 </title> 

</head> 

<body> 

<form id="myForm" method="get"> 

名 称 : <input type="text" size="20" value="" /><br /> 
密码 : <input type="text" size="20" value="" /> 
<input type=submit value=" 登 录 "> 

</form> 

<script type="text/javascript"> 

document .write ("表单 中 所 包含 的 子 元 素 ") ; 

document .write (document .getElementById('myForm') .length); 
</script> 

</body> 

</html> 


在 上 面 的 HTML 代码 中 ,创建 了 一 个 表单 对 象 ， 其 ID 名 称 为 “myForm”。 在 JavaScript 
程序 代码 中 ,使 用 “document.getElementById(myForm')” 语 句 获 取 当 前 的 表单 对 象 ， 最 后 使 用 
length 属性 显示 表单 元 素 长 度 。 

在 正 11.0 中 的 浏览 效果 如 图 14-10 所 示 ， 会 显示 一 个 表单 信息 ， 表 单 中 包含 两 个 文本 输 
入 框 和 一 个 按钮 。 在 表单 的 下 面 有 一 个 段落 ， 该 段落 显示 表单 元 素 中 包含 的 子 元 素 。 


- OO x 
@ 枯 ”D:\ 本 书 源 代码 \code 详 图 ~ 中 搜 索 .… 
大 form 表 单 长 度 x 

竟 各 百度 一 下 ， 你 名 知道 

名 称 : 

密码 : 登录 


表单 中 所 包含 的 子 元 素 3 


图 14-10 使 用 form 属性 


14.4.2 ”form 对 象 属性 与 方法 


表单 允许 客户 端的 用 户 以 标准 格式 向 服务 器 提交 数据 。 表 单 的 创建 者 为 了 收集 所 需 数据 ， 
使 用 了 各 种 控件 设计 表单 ， 如 input 或 select。 查 看 表单 的 用 户 只 需 填 充 数据 并 单 击 提交 按钮 即 
可 向 服务 器 发 送 数据 ， 服 务 器 上 的 脚本 会 处 理 这 些 数据 。 

表单 元 素 的 常用 属性 如 表 14-6 所 示 。 
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表 14-6 form 对 象 常用 属性 


属性 说 明 

action 设置 或 返回 表单 的 action 属性 

enctype 设置 或 返回 表单 用 来 编码 内 容 的 MIME 类 型 

id 设置 或 返回 表单 的 id 

length 返回 表单 中 的 元 素数 目 

method 设置 或 返回 将 数据 发 送 到 服务 器 的 HITP 方法 
name 设置 或 返回 表单 的 名 称 

target 设置 或 返回 表单 提交 结果 的 Frame 或 Window 名 


表单 元 素 的 常用 方法 如 表 14-7 所 示 。 
表 14-7 ”form 对 象 常用 方法 
方法 


把 表单 的 所 有 输入 元 素 重 置 为 它们 的 默认 值 


【 例 14.10】 《实例 文件 ，chl4\14.10html) 
<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript"> 
function formSubmit () 
{ 
document .getElementById ("myForm") .submit () 
I 
</script> 
</head> 
<body> 
<form id="myForm" action="1.jsp"” method="get"> 
姓名 : <input type="text" name="name" size="20"><br /> 
住址 : <input type="text" name="address" size="20"><br /> 
< 
<input type="button" onclick="formSubmit () " value=" 提 交 "> 
</form> 
</body> 
</html> 


在 HMTL 代码 中 ,创建 了 一 个 表单 ， 其 ID 名 称 为 “myForm”， 其 中 包含 了 文本 域 和 按 
钮 。 在 JavaScript 程序 中 ， 使 用 “document.getElementById("myForm")” 语 句 获取 当前 表单 对 
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象 ， 并 利用 表单 方法 submit 执行 提交 操作 。 
在 正 11.0 中 的 浏览 效果 如 图 14-11 所 示 ， 在 页 面 中 的 表单 里 输入 相关 信息 后 ， 单 击 【 提 
交 】 按 钮 ,会 将 文本 域 信息 提交 给 服务 器 程序 。 通 过 表单 的 按钮 触发 了 JavaScript 的 提交 事件 。 


- DO x 
Ge 半 DA\ 本 书 源 代码 \code 沁 图 ~ | D:\ 本 所 
大 D\ 本 书 源 代码 \code\ 源 代 .. X | 

将 尖 百 度 下 ， 你 就 知道 


姓名 : 网 天 | 
住址 : [天 而 x 
[L 乓 | 


图 14-11 form 表单 提交 


14.4.3” 单 选 与 复 选 的 使 用 


在 表单 元 素 中 ， 单 选 按钮 是 常用 的 元 素 之 一 。 在 浏览 器 对 象 中 ， 可 以 将 单 选 按钮 对 象 看 作 
是 一 个 对 象 。radio 对 象 代表 HTML 表单 中 的 单 选 按钮 。 在 HTML 表单 中 , <input type="radio"> 
每 出 现 一 次 ， 一 个 radio 对 象 就 会 被 创建 。 单 选 按钮 表示 一 组 互 斥 选项 按钮 中 的 一 个 。 当 一 个 
按钮 被 选中 后 ， 之 前 选中 的 按钮 就 变 为 非 选中 的 。 当 单 选 按钮 被 选中 或 不 选中 时 ， 该 按钮 就 会 
触发 onclick 事件 句柄 。 

同样 ， 表 单元 素 中 的 复 选 框 在 JavaScript 程序 中 也 可 以 作为 一 个 对 象 处 理 ， 即 checkbox 对 
象 ,checkbox 对 象 代表 一 个 HTML 表单 中 的 选择 框 ,在 HTML 文档 中 , <input type="checkbox"> 
每 出 现 一 次 ，checkbox 对 象 就 会 被 创建 。 可 以 通过 遍历 表单 的 elements[] 数 组 或 者 使 用 
document.getElementById() 来 访问 某 个 选择 框 。 

在 JavaScript 程序 中 , 单项 按钮 、 复 选 框 对 象 常用 的 方法 属性 和 HIML 标记 radio、checkbox 
的 方法 属性 一 致 ， 这 里 就 再 不 重复 介绍 了 。 


【 例 14.11】 实例 文件 :ch14\14.11html) 
<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript"> 
function check(){ 
document .getElementById ("checkl1") .checked=true 
function uncheck(){ 
document .getElementById ("checkl1") .checked=false 
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} 
function setFocus(){ 
document .getElementById('male') .focus () 
} 
function loseFocus(){ 
document .getElementById('male') .blur() 
} 
</script> 
</head> 
<body> 
<form> 
男 : <input id="male" type="radio" name="Sex" value=" 男 " /> 
女 : <input id="female" type="radio" name="Sex" value=" 女 " /><br /> 
<input type="button" onclick="setFocus()" value=" 设 置 焦点 " /> 
<input type="button" onclick="loseFocus()" value=" 失 去 焦点 " /> 
<br /><hr> 
<input type="checkbox" id="checkl"/> 
<input type="button" onclick="check()" value=" 选 中 复 选 框 " /> 
<input type="button" onclick="uncheck()"” value=" 取 消 复 选 框 " /> 
</form> 
</body> 
</html> 


在 上 面 的 JavaScript 代码 中 ， 创 建 了 四 个 JavaScript 函数 ， 用 于 设置 单 选 按钮 和 复 选 框 的 
属性 。 前 两 个 函数 使 用 checked 属性 设置 复 选 框 状态 。 后 两 个 函数 使 用 focus 和 blur 方法 设置 
单 选 按钮 的 行为 。 

在 正 11.0 中 的 浏览 效果 如 图 14-12 所 示 ， 在 该 页 面 中 可 以 通过 按钮 来 控制 单 选 按钮 和 复 
选 框 的 相关 状态 ， 例 如 使 用 【设置 焦点 】 和 【失去 焦点 】 设 置 单 选 按钮 的 焦点 ， 使 用 【选中 复 
选 框 】 和 【取消 复 选 框 】 设 置 复 选 框 的 选中 状态 。 上 述 操作 都 是 使 用 JavaScript 程序 完成 的 。 


a : 尝 
著 “D: 本 书 源 代码 \code\ 活 国 ~” 中 D:\ 本 
屋 ”DA 本 书 源 代 码 ode\ 源 代 . x | 下 
请 当 百 度 一 下 你 8 知道 
男 : 口 女 : O 
设置 焦点 


选中 复 选 框 


图 14-12 设置 单 选 按钮 和 复 选 框 状态 


14.4.4 ”使 用 下 拉 菜 单 

表单 中 下 拉 菜 单 是 表单 中 必 不 可 少 的 元 素 之 一 ,在 浏览 器 对 象 中 ， 下 拉 菜 单 可 以 看 作 是 一 
个 select 对 象 ,每 一 个 select 对 象 代表 HTML 表单 中 的 一 个 下 拉 列 表 。 在 HTML 表单 中 , <select> 
标记 每 出 现 一 次 ， 一 个 select 对 象 就 会 被 创建 。 可 通过 遍历 表单 的 elements[] 数 组 来 访问 某 个 
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select 对 象 , 或 者 使 用 document.getElementById()。Select 对 象 常用 的 方法 属性 和 <select> 标 记 的 
属性 一 样 ， 这 里 就 不 再 介绍 了 。 


【 例 14.12】〔 实 例文 件 : ch14\14.12html) 


<!DOCTYPE html> 

<html> 

<head> 

<script type="text/javascript"> 

function getIndex() 
{ 
Var x=document .getElementById ("mySelect") 
alert (x.selectedIndex) 


</script> 

</head> 

<body> 

<form> 

选择 自己 喜欢 的 水 果 : 

<select id="mySelect"> 
<option> 苹 果 </option> 
<option> 香 蔽 </option> 
<option> 桶 子 </option> 
<option> 梨 </option> 

</select> 

<br /><br /> 

<input type="button" onclick="getIndex()" 

value=" 弹 出 选择 项 的 序号 "> 

</form> 

</body> 

</html> 


在 HTML 代码 中 ， 创 建 了 一 个 下 拉 菜 单 ， 其 ID 名 称 为 mySelect。 当 单 击 按钮 时 ， 会 调用 
getIndex 函数 。 在 getIndex 函数 中 ， 使 用 语句 “document.getElementById("mySelect")” 获 取 下 
拉 菜 单 对 象 ， 然 后 使 用 selectedIndex 属性 显示 当前 选中 项 的 索引 。 

在 正 11.0 中 的 浏览 效果 如 图 14-13 所 示 ， 单 击 【 弹 出 选择 项 的 序号 】 按 钮 ， 可 以 显示 下 
拉 菜 单 中 当前 被 选中 项 的 索引 ， 例 如 页 面 中 的 提示 对 话 框 。 注 意 : 这 里 的 序号 是 从 0 开始 的 。 

| a i 外 

|s DANE\code\ 漆 化。 x 

亩 务 百度- 下 , 人 W306 

选择 自己 喜欢 的 水 果 ， 国画 | 
的 


pr 
和 A: 


图 14-13 获取 下 拉 菜 单 选中 项 的 序号 
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14.5 ”综合 实例 1 一 一 表单 注册 与 表单 验证 


如 果 要 成 为 一 个 网 站 会 员 ， 不 可 避免 的 就 是 要 进行 注册 、 向 网 站 服务 器 提交 个 人 信息 。 当 
用 户 填写 完 注册 信息 后 ， 为 了 保证 这 些 信息 的 合法 性 ， 还 应 该 对 这 些 信息 进行 验证 。 对 注册 信 
息 的 合法 性 进行 验证 ， 可 以 应 用 JavaScript 实现 。 虽 然 服务 器 代码 也 可 以 实现 ， 但 是 使 用 
JavaScript 代码 实现 ， 其 速度 和 安全 性 比较 高 。 

具体 步骤 如 下 所 示 。 


分 析 需 求 


如 果 要 实现 一 个 表单 注册 页 面 ， 首 先 需要 确定 需要 浏览 者 提交 何 种 信息 ， 例 如 用 户 名 、 密 
码 、 电 子 邮 件 、 住 址 和 身份 证 号 等 ， 这 些 信 息 确 定 后 ， 就 可 以 动手 创建 HIML 表单 了 。 然 后 
利用 表格 对 表单 进行 限制 , 从 而 完成 局 部 布局 , 使 表单 显示 样式 更 加 漂亮 。 最 后 , 使 用 JavaScript 
代码 对 表单 元 素 验证 ， 例 如 不 为 空 、 电 子 邮 件 格式 不 正确 等 。 


(02 创建 HIML， 实 现 基本 表单 


在 HTML 页 面 中 ， 首 先 创 建 一 个 表单 对 象 ， 表 单 对 象 中 包括 用 户 名 、 性 别 、 密 码 、 确 认 
密码 、 密 码 问题 、 问 题 答 案 、Email、 联 系 电话 和 职业 等 元 素 对 象 ， 这 里 涉及 文本 框 、 下 拉 菜 
单 和 单 选 按钮 等 ， 其 代码 如 下 所 示 。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 表 单 注册 和 验证 </title> 

</head> 

<body> 

<form name="forml" id="forml" method="post" action="reg2.jsp"> 
<B> 用 gnbsp 户 gnbsp; 名 </B>: 

<INPUT maxLength="10" size=30 name="uid" type="text"> 
<B> 性 gnbsp; gnbsp; gnbsp; &nbsp; 别 </B>: 

<input type=radio CHECKED value="boy" name="gender"> 
男孩 

<input type=radio value="girl" name="gender"> 

女孩 

<B> 密 gnbsp; gnbsp; gnbsp; &gnbsp; 码 </B>: 

<input name="pswl" type="password" size=32> 

EE 

<B> 确 认 密 码 </B>: 

<td ><input name="psw2" type="password" size=32> 

<B> 密 码 问 题 </B>: 


<input type=text size=30 name="question" type="text"> 
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<B> 问 题 答案 </B>: 
<input type=text size=30 name="answer" type="text"> 
<B>Email</B>: 
<input maxLength=50 size=30 name="email" type="text"> 
<B> 联 系 电话 </B>: 
<input maxLength=50 size=30 name="tel" type="text"> 
<b> 职 gnbsp; gnbsp; gnbsp; gnbsp; 业 </b>: 
<select name="career" class="inputl" /> 
<option value="student" selected="selected"> 学 生 </option> 
<option value="worker" > 工人 </option> 
<option value="teacher" > 老师 </option> 
<option valu famer" > 农民 </option> 
<option value="business" > 商人 </option> 
<input type=submit value=" 注 册 " name=Submit onclick="return check()"> 
<input type=reset value=" 清 除 " name=Submit2> 
</form> 
</body> 
</html> 


在 下 11.0 中 的 浏览 效果 如 图 14-14 所 示 , 网 页 中 显示 了 一 个 表单 对 象 , 并 包含 多 个 子 元 素 


站 DA\ 本 书 学 代码 Vcode\ 涯 代码 \ch14 图 ”搜索 Dr- ®@ 
屋 ”去 音 注 册 和 验证 x 
调和 百度 -下 ， 你 Bi 和 0 利 


用 户 名 : 性 别 @ 男孩 O 〇 女孩 害 。 码 : 


确认 密 但 ; 密码 问题 : 

问题 答案 : Email: 

联系 电话 : | | 职业: [宇和 下 v|] 
注册 || 清除 


图 14-14 表单 显示 


[0 添加 table 表格 ， 实 现 表 单 的 基本 布局 


在 HTML 表单 中 ， 加 入 table 表格 ， 用 表格 来 控制 和 定位 表单 元 素 对 象 的 位 置 。 其 代码 如 
下 所 示 。 


<form name="forml" id="forml" method="post" action="reg2.jsp"> 

<table border=1l1 align=center width=350> 

<tr align=middle><Th colSpan=2 height=24> 新 用 户 注册 </th></tr> 

<Er> 

<td width="40%" > 

<b> 用 gnbsp 户 gnbsp; 名 </b>: </td> 

<td width="60%" ><input maxLength="10" size=30 name="uid" 
type="text"></td> 

SA 
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ee 
<td ><b> 性 gnbsp; gnbsp; gnbsp; gnbsp; 别 </b>: </td> 
<td><input type=radio checked value="boy" name="gender"> 
男孩 
<input type=radio value="girl" name="gender"> 
女孩 </td> 
</tr> 
中 
<td ><b> 密 gnbsp; gnbsp; gnbsp; gnbsp; 码 </b>: 
</td> 
<td><input name="pswl" type="password" size=32></td> 
<tr> 
<td><b> 确 认 密码 </b>: </td> 
<td ><input name="psw2" type="password" size=32></td> 
<tr> 
<td ><b> 密 码 问 题 </b>: </td> 
<td> 
<input type=text size=30 name="question" type="text"> 
</td></tr> 
<tr> 
<td ><b> 问 题 答 案 </b>: </td> 
<td> 
<input type=text size=30 name="answer" type="text"> 
</td></tr> 
= 
<td><b>Email</b>: </td> 
<td> 
<input maxLength=50 size=30 name="email" type="text"></td> 
</tr> 
<tr> 
<td><b> 联 系 电话 </b>: </td> 
<td> 
<input maxLength=50 size=30 name="tel" type="text"></td></tr> 
<tr> 
<td><b> 职 enbsp; gnbsp; gnbsp; gnbsp; 业 </b>:</td> 
<td><select name="career" class="inputl" /> 
<option value="student" selected="selected"> 学 生 </option> 
<option value="worker" > 工人 </option> 
<option value="teacher" > 老师 </option> 
<option value="famer" > 农民 </option> 
<option value="business" > 商人 </option> 
</td> 
< ErS<tr> 
<td></td><td><input type=submit value=" 注 册 " name=Submit onclick="return 
check()"> 
<input type=reset value=" 清 除 " name=Submit2> 
</ta> 
AI 
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</table> 

</form> 

</body> 

在 正 11.0 中 的 浏览 效果 如 图 14-15 所 示 ， 可 以 看 到 网 页 中 表单 元 素 都 杠 套 在 table 单元 格 
中 ， 并 且 长 度 和 宽度 都 保持 一 致 。 


完 已 x 
闻 DA 本 书 源 代 码 \Code\ 国 ”| 控 索 - 
忆 雪 单 注册 和 验证 x 回 
将 当 百 度 一 下 ,你 B 知 适 
新 用 户 注册 
用 户 名 : 
性 别 ; 图 男孩 O 女孩 
密码 : 
懈 认 密码 
密码 问题 ， 
问题 答案 : CC | 
| 
联系 电话 ; 
趴 业 字 生 v 
注册 | 清除 | 
图 14-15 浏览 效果 


人 @ 绚 添加 JavaScript 代码 ， 实 现 非 空 验证 


在 <head> 标 记 中 间 ， 添 加 JavaScript 代码 ， 实 现 对 表单 元 素 对 象 的 非 空 验证 ， 例 如 验证 用 
户 名 、 密 码 和 确认 密码 是 否 为 空 等 ， 其 代码 如 下 所 示 。 


<script language="JaVaScript"> 
function check() 

{ 

fr = document .forml; 


if(fr.uid.value=="")// 用 户 名 不 能 为 空 
{ 
alert ("用 户 ID 必 须要 填写 ! "); 


EUld FocCUa() 
Teturn Falses 
} 
if((fr.pswl.value!="") || (fr.psw2.value!="") ) // 两 次 密码 输入 必须 一 致 
{ 
if(fr.pswl.value!=fr.psw2.value) 


alert ("密码 不 一 致 ,请 重新 输入 并 验证 密码 ! ") ; 
fr.pswl.focus(); 

return false; 

3 


于 
else{// 密 码 也 不 能 为 空 
alert (" 密 码 不 能 为 空 ! ") ; 


fr.pswl.focus(); 
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return false; 
} 
if (fr.gender.value =="")// 性 别 必须 填写 
{ 
alert ("性 别 必须 要 填写 ! ") ; 
fr.name.focus(); 
return false; 


} 
fr.submit (); 
1 


</script> 


在 正 11.0 中 的 浏览 效果 如 图 14-16 所 示 ， 如 果 不 在 【用 户 名 】 文 本 框 中 输入 信息 ， 当 单 击 
【注册 】 按 钮 时 , 会 弹出 一 个 对 话 框 并 提示 用 户 名 必须 填写 。 这 是 一 个 JavaScript 的 非 空 验证 ， 
其 实现 使 用 了 form 对 象 的 属性 。 例 如 ， 在 “i.uid.value” 语 句 中 ， 和 全 表示 form 对 象 ，uid 表示 
用 户 名 ，value 表示 用 户 名 的 文本 值 。 


- 0O x 
| 司 “D+\ 环 书 深 ftI\code 中 国 ”|| 扫 索 - 
局 雪 捍 注册 和 验证 x 加 
请 全 百度 一 下 ， 作 Si 知道 
新 用 户 注册 
用 户 名 
性 别 : 图 男孩 O 女孩 
谨 _ 码 : 来 自 网 页 的 消息 二 
确认 密码 : 
i = 一 
站 — A moemmms， 
一 -一 
Email: | 
隐 系 电话 : 
职业 : 学 本 V] — 
注册 | | 清除 | 


图 14-16 ” ”JavaScript 非 空 验证 


名 加 添加 JavaScript 代码 ， 实 现 电子 邮件 地 址 验证 


如 果 要 实现 电子 邮件 地 址 验证 ， 需 要 完成 两 个 部 分 ， 一 个 是 在 check 函数 中 加 入 对 Email 
地 址 的 格式 获取 ， 另 外 一 个 是 创建 一 个 函数 Email 对 输入 地 址 进行 判断 。 


if(fr.email.value != "")// 验 证 email 的 格式 
{ 

if(!isEmail(fr.email.value)) { 

alert ("请 输入 正确 的 邮件 名 称 ! ") ; 
fr.email.focus(); 

return false; 

有 

} 
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function isEmail (thestr){ 
Var atindex=thestr.indexof ('@'); 
Var dotindex=thestr.indexOof ('.',atindex); 
var flag=true; 
thesub=thestr.substring (0,dotindex+1); 


if((atindex<]1) || (atindex!=thestr.lastIndexOf ('@'))|| (dotindex<atindex+2)||( 
thestr.length<=thesub.length)){ 
flag=false; 
}elsef{ 
flag=true; 
i 
return (flag); 
} 


在 正 11.0 中 的 浏览 效果 如 图 14-17 所 示 ， 当 在 表单 中 输入 信息 后 , 如 果 电 子 邮件 地 址 不 符 
合格 式 ， 就 会 弹出 相应 对 话 框 ， 提 示 邮 件 地 址 格式 不 正确 。 


- oO x 
| 外 “DA 本 书 源 代码 vode\ 国 ”已 搜索 
| 全 mi 验证 x 攻 
区 全 百 灾 一下， 你 BK 和 0 二 
关 
用 户 名 : 四 
性 齐 : 9 
密码 : 
确认 密码 : . 
密码 问题 : 
问题 答案 : 
[Email: 
| 联系 电话 ; 
趴 业 


图 14-17 验证 电子 邮件 地 址 


14.6 ”综合 实例 2 一 一 省 市 联动 效果 


在 网 页 注册 时 ， 有 时 为 了 增加 页 面 效果 和 减少 浏览 者 输入 的 工作 量 ， 往 往 会 使 用 一 个 菜单 
的 级 联 效果 ， 即 第 一 个 下 拉 菜 单 内 容 改变 ， 此 时 第 二 个 下 拉 菜 单 内 容 改变 ; 如 果 第 二 个 下 拉 菜 
单 改变 则 第 三 个 下 拉 菜 单 内 容 改动 。 本 实例 实现 一 个 省 市 联动 效果 : 当选 择 省 时 ， 显 示 该 省 的 
市 ; 选择 市 时 ， 会 显示 不 同 的 区 。 

有 具体 实现 步骤 如 下 所 示 。 


0 加 分 析 需 求 
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实现 一 个 省 市 联动 效果 。 首先 需要 确定 下 拉 菜 单 的 个 数 , 这 里 设 定 了 三 个 菜单 个 数 , 即 省 、 
市 和 区 。 然 后 为 三 个 菜单 添加 相应 的 数据 项 ， 最 后 使 用 JavaScript 完成 级 联 效果 。 


9 到 创建 HTML 页 面 ， 实 现 基本 下 拉 菜 单 


创建 HTML 页 面 ， 在 里 面 实现 三 个 下 拉 菜 单 ， 这 三 个 下 拉 菜 单 都 包含 在 一 个 表单 中 。 其 
代码 如 下 所 示 。 


<!DOCTYPE html> 
<html> 
<head> 
<tit1le> 省 市 联动 </title> 
</head> 
<body> 
<div align="center"> 省 市 联动 </div> 
<div align="center"> 
<form name="isc"> 
<table border="0" cellspacing="0" cellpadding="0"> 
<tr align="center"> 
<td nowrap height="11"> 
<select name="example" size="1" 
onChange="redirect (this.options .selectedIndex) "> 
<option selected> 请 选择 </option> 
<option> 河 南 省 </option> 
<option> 山 东 省 </option> 
</select> 
<br, /> 
<select name="stage2" size="1" 
onChange="redirectl (this.options.selectedIndex) "> 
<option value=" " selected> 所 在 市 </option> 
</select> 
a 
<select name="stage3" size="]1"> 
<option value=" " selected> 所 在 区 </option> 
</select></table> 
</form></div> 
</body> 
</html> 


在 正 11.0 中 的 浏览 效果 如 图 14-18 所 示 , 页 面 上 显示 了 三 个 下 拉 菜 单 ， 其 中 第 一 个 下 拉 菜 
单 可 以 选择 ， 其 他 两 个 没有 相关 数据 项 选择 。 
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2 
可 ”D:\ 本 书 源 代码 \code 衣 图 ”| 搜索 
怕人 省 市 联动 x 加 
斌 汪 百 度 一 下 ， 你 也 知道 
省 市 联动 
请 选择 v 
所 在 市 v 
所 在 区 Y 


图 14-18 设 定 下 拉 菜 单 
i@ 旨 添加 JavaScript 代码 ， 实 现 级 联 效果 


下 拉 菜 单 实现 后 ， 需 要 为 下 面 两 个 菜单 添加 相应 的 数据 选项 ， 并 且 还 需要 实现 相应 级 联 效 
果 ， 即 在 第 一 个 下 拉 菜 单 选 择 后 则 第 二 个 下 拉 菜 单 内 容 改 变 ， 其 代码 如 下 所 示 。 


<script language="JavaScript"> 
Var groups=document.isc.example.options.1length; 
var group=new Array (groups); 
for (i=0; i<groups;i++) 
group[i]=new Rrray() 
group[0] [0]=new Option ("所 在 市 "," "); 
group[1] [0]=new Option ("请 选择 河南 省 的 所 在 市 ",""); 
group[1] [1]=new Option ("郑州 ", "11"); 
group[1] [2]=new Option ("新 乡 ", "12"); 
group[1] [3]=new Option ("开封 ", "13"); 
group[2] [0]=new Option ("请 选择 山东 省 所 在 市 ",""); 
group[2] [1]=new Option ("青岛 "， ol eh 
group[2] [2]=new Option ("济南 "， eh 
Var temp=document .isc.stage2 
function redirect (x) 
{ 
for (m=temp.options.length-1;m>0;m--) 
temp .options [m]=null; 
for (i=0;i<group[x] .length;i++) 
{ 
temp.options[i]=new Option (group[x] [i].text,group[x] [i] .value); 
lL 
temp .options [0] .selected=true; 
redirect1l1(0) ; 
} 
var secondGroups=document .isc.stage2.options.length; 
var secondGroup=new Array (groups); 
for (i=0; i<groups;i++) 
{ 
secondGroup[i]=new Array (group[i].length); 
for(j=0; j<group[i].length;j++) 
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secondGroup[i][j]=new Array(); 


' 

} 

secondGroup[0] [0] [0]=new 
secondGroup[1] [0] [0]=new 
secondGroup[1] [1] [0]=new 
secondGroup[1] [1] [1]=new 
secondGroup[1] [1] [2]=new 
secondGroup[1] [1] [3]=new 
secondGroup[1] [2] [0]=new 
secondGroup[1] [2] [1]=new 
secondGroup[1] [2] [2]=new 
secondGroup[1] [2] [3]=new 
secondGroup[1] [3] [0]=new 
secondGroup[1] [3] [1]=new 
secondGroup[1] [3] [2]=new 
secondGroup[2] [0] [0]=new 
secondGroup[2] [1] [0]=new 
secondGroup[2] [1] [1]=new 
secondGroup[2] [1] [2]=new 
secondGroup[2] [1] [3]=new 
secondGroup[2] [2] [0]=new 
secondGroup[2] [2] [1]=new 
secondGroup[2] [2] [2]=new 


option ("所 在 区 "," "); 
option ("所 在 区 "," "); 
GPE1SD 人 郑州 号 7 
Option (" 管 城区 ", "111") 7 
Option ("金水 区 ", "112") 7 
QOption(m eG en Sn 
Option ("新 乡 "，" es 
Option ("红旗 区 ", "121"); 
option ("牧野 区 ", "122"); 
Option (" 凤 泉 区 ", "123") 7 
optiont* 有 TH yy 
Option (" 龙 享 区 ", "131"); 
Option (" 鼓 楼 区 ", "132") 7 
Optionf(" 所 在 区 "wm ) 
Option ("青岛 "," bh 
Option ("崂山 区 ", "211") 7 
option ("四 方 区 ", "212"); 
Option (" 城 阳 区 ", "213") 7 
Option ("济南 "," "); 
Option ("天 桥 区 ", "221")， 
Option ("长 清 区 ", "222") 7 


Var templ=document .isc.stage3; 


function redirectl (y) 
{ 


for (m=templ .options.length-1;m>0;m-—) 


templ .options[m]=null; 


for(i=0;i<secondGroup[document .isc.example.options.selectedIndex] [y] .length 
?i++) 
{ 
templ .options[i]=new 
Option (secondGroup [document .isc.example.options.selectedIndex] [y] [i] .text,s 
econdGroup 
[document .isc.example.options.selectedIndex] [y] [i] .value); 
} 
templ .options[0] .selected=true; 
} 
</script> 


在 正 11.0 中 的 浏览 效果 如 图 14-19 所 示 ， 选 择 第 一 个 菜单 选项 ,第 二 个 会 发 生变 化 ; 选择 
第 二 个 下 拉 菜 单 内 容 ， 第 三 个 下 拉 菜 单 内 容 发 生变 化 。 
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- OO x 
闫 ”D:\ 本 书 源 代码 Ycode 诺 图 ~ C 搜索- 
后 汀 市 联动 大 省 市 联动 x 攻 
请 百度 -下 , 你 0 道 
省 市 联动 
[未 当 Y] 


图 14-19 ”级 联 效果 实现 


14.7 专家 解 惑 


1. 在 IE 中 可 以 通过 showModalDialog 和 showModelessDialog 打开 模 态 和 非 模 态 
窗口 ， 但 是 Firefox 不 支持 。 

解决 办 法 : 直接 使 用 window.open(pageURL,name,parameters) 方 式 打开 新 窗口 。 如 果 需 要 
传递 参数 ， 可 以 使 用 frame 或 者 iframe。 

2. 在 JavaScript 中 定义 各 种 对 象 变量 名 时 ， 尽 量 使 用 id， 避免 使 用 name。 

在 正中 ，HTML 对 象 的 id 可 以 作为 document 的 下 属 对 象 变量 名 直接 使 用 。 在 Firefox 中 
不 能 ， 所 以 在 平常 使 用 时 尽量 使 用 id， 避免 只 使 用 name 不 使 用 id 的 情况 。 


第 15 章 JavaScript 操纵 CSS3 


JavaScript 和 CSS 有 一 个 共同 特点 ， 二 者 都 是 在 浏览 器 上 解析 并 运行 的 。CSS 可 以 设置 网 
页 上 的 样式 和 布局 ， 增 加 网 页 静态 特效 。JavaScript 是 一 种 脚本 语言 ， 可 以 直接 在 网 页 上 被 浏 
览 器 解释 运行 。 如 果 将 JavaScript 的 程序 和 CSS 的 静态 效果 二 者 结合 起 来 ， 可 以 创建 出 大 量 的 
动态 特效 。 


15.1 DHTML 简介 


DHTML 又 称 为 动态 HTML, 并 不 是 一 门 独立 的 新 语言 ,实际 上 是 JavaScript、.HTML DOM、 
CSS 以 及 HTML/XHTML 的 结合 应 用 。 可 以 说 DHTML 是 一 种 制作 网 页 的 方式 , 而 不 是 一 种 网 
络 技 术 ( 就 像 JavaScript 和 ActiveX) ， 也 不 是 一 个 标记 、 一 个 插件 或 者 一 个 浏览 器 。 它 可 以 通 
过 JavaScript、VBScript、HTML DOM、Layers 或 者 CSS 来 实现 。 这 里 需要 注意 的 是 ， 同 一 效 
果 DHTML 在 不 同 的 浏览 器 被 实现 的 方式 是 不 同 的 。 

下 面 将 着 重 介绍 DHTML 三 部 分 的 内 容 。 


(1) 客户 端 脚本 语言 
使 用 客户 端 脚本 语言 (例如 JavaScript 和 VBScript) 来 改变 HIML 代码 有 很 长 一 段 时 间 了 。 
当 用 户 把 鼠标 指针 放 在 一 幅 图 片上 时 , 该 幅 图 片 改变 显示 效果 , 那么 它 就 是 一 个 DHTML 例子 。 
Microsoft 和 Netscape 浏览 器 都 允许 用 户 使 用 脚本 语言 去 改变 HTML 语言 中 大 多 数 的 元 素 ， 而 
这 些 能 够 被 脚本 语言 改变 的 页 面 元 素 叫 作 文本 对 象 模型 (Document Object Model) 。 


(2) DOM 

DOM 是 DHTML 中 的 核心 内 容 ， 使 得 HTML 代码 能 够 被 改变 。DOM 包括 一 些 有 关 环境 
的 信息 ， 例 如 当前 时 间 和 日 期 、 浏 览 器 版 本 号 、 网 页 URL 以 及 HTML 中 元 素 标记 (例如 <p> 
标记 、<div> 标 记 或 者 表格 标记 ) 。 通 过 开放 这 些 DOM 给 脚本 语言 ， 浏 览 器 就 允许 用 户 来 改变 
这 些 元 素 了 。 相 对 来 说 ， 还 有 一 些 元 素 不 能 被 直接 被 改变 ,但 是 用 户 能 通过 使 用 脚本 语言 改变 
其 他 元 素来 改变 它们 。 
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在 DOM 中 有 一 部 分 内 容 专门 用 来 指定 什么 元 素 能 够 改变 ， 这 就 是 事件 模型 。 所 谓 事件 ， 
就 是 把 鼠标 指针 放 在 一 个 页 面 元 素 上 (onmouseover) 、 加 载 一 个 页 面 onload) 、 提 交 一 个 表 
单 (onsubmit) 、 在 表单 文字 的 输入 部 分 、 用 鼠标 单 击 一 下 (onfocus) 等 。 


(3) CSS 
脚本 语言 能 够 改变 CSS 中 的 一 些 属性 。 通 过 改变 CSS， 使 用 户 能 够 改变 页 面 中 的 许多 显 
示 效 果 。 这 些 效 果 包 括 颜色 、 字 体 、 对 齐 方式 、 位 置 以 及 大 小 。 


15.2 ”前台 动态 网 页 效果 


JavaScript 和 CSS 的 结合 运用 ， 是 喜爱 网 页 特效 的 浏览 者 的 一 大 喜讯 。 作 为 一 个 网 页 设计 者 ， 
通过 对 JavaScript 和 CSS 的 学 习 ， 可 以 创作 出 大 量 的 网 页 特效 ， 例 如 动态 内 容 、 动 态 样式 等 。 


15.2.1 动态 内 容 


JavaScript 和 CSS 相 结合 , 可 以 动态 改变 HTML 页 面 元 素 内 容 和 样式 , 这 种 效果 是 JavaScript 
常用 的 功能 之 一 。 其 实现 也 比较 简单 ， 需 要 利用 innerHTML 属性 。 

对 于 innerHTML 属性 ， 几 乎 所 有 的 元 素 都 有 innerHTML 属性 ， 它 是 一 个 字符 串 ， 用 来 设 
置 或 获取 位 于 对 象 起 始 和 结束 标记 内 的 HTML。 


【 例 15.1】 〈 实 例文 件 : ch15\15.1.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 改 变 内 容 </title> 

<script type="text/javascript"> 

function changeit (){ 
Var html=document .getElementById("content"); 
Var htmll=document .getElementById ("content1"); 
Var t=document .getElementById("tt"); 

Var temp="<br /><style>#abc 

{color:red;font-size:36px;}</style>"+html .innerHTML; 

htmll.innerHTML=temp; 

下 

</script> 

</head> 

<body> 

<div id="content"> 

<div id="abc"> 

祝 祖 国生 日 快乐 ! 

</div> 

</div> 

<div id="content1"> 
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</div> 

<input type="button" onclick="changeit()" value=" 改 变 HTML 内 容 "> 

</body> 

</html> 

在 上 面 的 HTML 代码 中 ， 创 建 了 几 个 DIV 层 ， 层 下 面 有 一 个 按钮 并 且 为 按钮 添加 了 一 个 
单 击 事 件 ， 即 调用 changeit 函数 。 在 JavaScript 程序 函数 changeit 中 ,首先 使 用 getElementById 
方法 获取 HTML 对 象 。 下 面 使 用 innerHTML 属性 设置 htmll 层 的 显示 内 容 。 

在 正 11.0 中 的 浏览 效果 如 图 15-1 所 示 ， 在 显示 页 面 中 ， 有 一 个 段落 和 按钮 。 当 单 击 按钮 
时 ， 会 显示 如 同 15-2 所 示 的 窗口 ， 会 发 现 段落 内 容 和 样式 发 生变 化 ， 即 增加 了 一 个 段落 ， 并 
且 字 体 变 大 ， 颜 色 为 红色 。 


一 口 X = 
着 _D:\ 本 书 源 代码 Vcode 计 图 ”| 搜索 .. 加 DiNEH 涯 Rode 虽 国 || 搜索- 
< 本 
总 改变 内 容 x 局 ee L 
请 全 百 放下 ， 你 Si 知道 
请 尖 百 度 一 下 ， 你 就 知道 


祝 祖国 生日 快乐 ! 祝 祖 国生 日 快乐 ! 


改变 HTML 内 容 
祝 祖 国生 日 快乐 ! 
改变 HTML 内 容 
图 15-1 动态 内 容 显 示 前 图 15-2 动态 内 容 显 示 后 


15.2.2 ”动态 样式 


JavaScript 不 仅 可 以 改变 动态 内 容 ， 还 可 以 根据 需要 改变 动态 HTML 元 素 的 显示 样式 ， 例 
如 显示 大 小 、 颜 色 和 边框 等 ,要 动态 改变 HTML 元 素 动态 样式 ,首先 需要 获取 到 要 改变 的 HIML 
对 象 ， 然 后 利用 对 象 的 相关 样式 属性 设 定 不 同 的 显示 样式 。 

在 实现 过 程 中 ， 需 要 利用 到 styleSheets 属性 ， 它 表示 当前 HIML 网 页 上 的 样式 属性 集合 ， 
可 以 以 数组 形式 获取 ; 属性 mles 表示 是 第 几 个 选择 器 ;属性 cssRules 表示 是 第 几 条 规则 。 


【 例 15.2】 实例 文件 : ch15\15.2.html) 
<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="15.2.css" /> 
<script> 
function fnInit(){ 
// 访问 styleSheet 中 的 一 条 规则 ， 修 改 packgroundcolor 的 值 
Var oStyleSheet=document .styleSheets[0]; 
Var oRule=oStyleSheet .rules[0]; 
oRule.style.backgroundColor="#D2B48C"; 
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oRule.style.width="200px"; 
oRule.style.height="120px"; 
} 

</script> 
<title> 动 态 样式 </title> 
</head> 

<body> 

</head> 

<div class="classl"> 
我 会 改变 颜色 

</div> 

<a href=# onclick="fnInit () "> 改变 背景 色 </a> 
<body> 

</html> 


在 上 面 的 HTML 代码 中 ， 定 义 了 一 个 DIV 层 ， 其 样式 规则 为 class1， 后 面 创建 了 一 个 超 
级 链接 ， 并 且 为 超级 链接 定义 了 一 个 单 击 事件 ， 当 被 单 击 时 会 调用 fnInit 函数 。 在 JavaScript 
程序 的 fnInit 函数 中 ， 首 先 使 用 “document.styleSheets[0] ”语句 获取 当前 的 样式 规则 集合 ， 
着 使 用 “rules[0] ”获取 第 一 条 样式 规则 元 素 ， 最 后 使 用 “oRule.style ”样式 对 象 分 别 设置 背景 
色 、 宽 度 和 高 度 样式 。 


【 例 15.2】〔 实 例文 件 ，ch15\15.2.css) 


-Classl 


{ 
width:100px; 
background-color:#9BCD9B; 
height:80px; 
} 
此 选择 器 比较 简单 ， 定 义 了 宽度 、 高 度 和 背景 色 。 
在 正 11.0 中 的 浏览 效果 如 图 15-3 所 示 , 网 页 显示 了 一 个 DIV 层 和 超 链接 。 当 单 击 超 链 接 
时 ， 会 显示 如 图 15-4 所 示 的 页 面 ， 此 时 DIV 层 背 景色 发 生 了 变化 ， 并 且 层 高 度 和 宽度 变 大 。 
了 1 和 ，- 居 - 0O x 
相 ”D:\ 本 书 源 代码 \code 说 图 ~ 搜索. @ 大 file:///0:/ 本 书 源 代码 /c 国 ~ 节 搜索 .… 
屋 动态 样式 x 区 |§ she x 区 
堵 当 百 度 一 下 ,你 就 知 首 


Wy 


图 15-3 动态 样式 改变 前 图 15-4 动态 样式 改变 后 


"330。 
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15.2.3 ”动态 定位 


JavaScript 程序 结合 CSS 样式 属性 可 以 动态 地 改变 HTML 元 素 所 在 的 位 置 。 如 果 动 态 改变 
HTML 元 素 的 坐标 位 置 ， 需 要 重新 设 定 当前 HTML 元 素 的 坐标 位 置 。 此 时 需要 使 用 新 的 元 素 
属性 pixelLeft 和 pixelTop， 其 中 pixelLeft 属性 返回 定位 元 素 左边 界 偏 移 量 的 整数 像素 值 ， 因 为 
属性 的 非 像素 值 返 回 的 是 包含 单位 的 字符 串 , 例如 30px。 利用 这 个 属性 可 以 单独 处 理 以 像素 为 
单位 的 数值 ，pixelTop 属性 以 此 类 推 。 


【 例 15.3】 《实例 文件 : chl1S\15.3.html) 


<!DOCTYPE html> 

<html> 

<head> 

<style type="text/css"> 
#d1{ 

position: absolute; 
width: 300px; 

height: 300px; 
visibility: visible; 
color: #fff; 

background: #EE6363; 

} 

#d2{ 

position: absolute; 
width: 300px; 

height: 300px; 
visibility: visible; 
COLOr2E #EFE2 

background: #EED2EE; 

} 

#d3{ 

position: absolute; 
width: 150px; 

height: 150px; 
visibility: visible; 
colors 本 天 天 工 5 

background: #9AFF9A; 

} 

</style> 

<script> 

var dlrad27a3 he 
window.onload=function(){ 
dl=document .getElementById('d1'); 
d2=document .getElementById('d2°'); 
d3=document .getElementById('d3'); 
w=window.innerWidth; 
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h=window.innerHeight; 

} 

function divMoveTo(d,x,y)t{ 

d.style.pixelLeft=x; 

d.style.pixelTop=y; 

} 

function divMoveBy (d,dx,dy){ 

d.style.pixelLeft +=dx; 

d.style.pixelTop +=dy; 

} 

/Script> 

</head> 

<body id="bodyId"> 

<form name="forml"> 

<h3> 移 动 定位 </h3> 

<p> 

<input type="button" value=" 移 动 d2" onclick="divMoveBy (d2, 100,100)"><br /> 

<input type="button" value=" 移 动 d3 到 d2 (0,0)" 
onclick="divMoveTo(d3,0,0)"><br /> 

<input type="button" value=" 移 动 d3 到 d2 (75,75)" 
onclick="divMoveTo(d3,75,75)"><br /> 

</p> 

</form> 

<div id="dl"> 

<b>dl</b> 

</div> 

<div id="d2"> 

<b>d2</b><br /><br /> 

d2 包 含 d3 

<div id="d3"> 

<b>d3</b><br /><br /> 

d3 是 d2 的 子 层 

</div> 

</div> 

</body> 

</html> 


在 HTML 代码 中 ， 定 义 了 三 个 按钮 ， 并 为 三 个 按钮 添加 了 不 同 的 单 击 事件 ， 即 可 以 调用 
不 同 的 JavaScript 函数 。 下 面 定义 了 三 个 DIV 层 ， 分 别 为 dl 、d2 和 d3，4d3 是 d2 的 子 层 。 在 
<style> 标 记 中 ， 分 别 使 用 ID 选择 器 定义 了 三 个 层 的 显示 样式 ， 例 如 绝对 定位 、 是 否 显示 、 背 
景色 、 宽 度 和 高 度 。 在 JavaScript 代码 中 ， 使 用 “window.onload = function()” 语 句 表示 页 面 加 
载 时 执行 这 个 函数 ， 函 数 内 使 用 语句 “getElementById” 获 取 不 同 的 DIV 对 象 。 在 divMoveTo 
函数 和 divMoveBy 函数 内 都 重新 定义 了 新 的 坐标 位 置 。 

在 正 11.0 中 的 浏览 效果 如 图 15-5 所 示 ， 页 面 显 示 了 三 个 按钮 ， 每 个 按钮 执行 不 同 的 定位 
操作 。 下 面 显示 了 三 个 层 ， 其 中 d2 层 包含 d3 层 。 当 单 击 第 二 个 按钮 时 ， 可 以 重新 动态 定位 d3 
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的 坐标 位 置 ， 其 显示 效果 如 图 15-6 所 示 。 其 他 按钮 ， 有 兴趣 的 读者 可 以 自行 测试 。 


ER - oo 


| DVS\codel Dp- PE 3 也 
DvP mlAcode Ute. | Ormrode Rte 

部 下 部 5e-, Gas 

移动 定位 移动 定位 

EE [本 本 

CE rT 

Pesaran rr 

da 

扣 包 洛 d3 

图 15-5 动态 定位 前 图 15-6 动态 定位 后 


15.2.4 ”显示 与 隐藏 


有 的 网 站 有 时 根据 需要 会 自动 或 手动 隐藏 一 些 层 ， 从 而 为 其 他 层 节省 显示 空间 。 要 实现 手 
动 隐藏 或 展开 层 ， 需 要 将 CSS 代码 和 JavaScript 代码 相 结合 。 实 现 该 实例 需要 使 用 到 display 
属性 ， 通 过 该 属性 值 可 以 设置 元 素 以 块 显示 或 者 不 显示 。 


【 例 15.4】 《实例 文件 : chlS\15.4.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 隐 藏 和 显示 </title> 
<script language="JavaSscript" type="text/Javascript"> 
function toggle (targetid){ 
if (document .getElementById) { 
target=document .getElementById (targetid); 
if(target.style.display=="block"){ 
target.style.display="none"; 
} elsef{ 
target.style.display="block"; 
} 
} 
} 
</script> 
<style type="text/css"> 
.div{ border:lpx #06F solid;height:50px;width:150px;display:none;} 
a {width:100px; display:block} 
</style> 
</head> 
<body> 
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<a href="#" onclick="toggle('"div1') "> 显示 /隐藏 </a> 
<div id="divl" class="div"> 

<img src=11.jpg> 

<p> 市 场 价 ，390 元 </p> 

<p> 购 买 价 : 190 元 </p> 

</div> 

</body> 

</html> 


在 代码 中 ， 创 建 了 一 个 超 链接 和 一 个 DIV 层 div1，DIV 层 中 包含 了 图 片 和 段落 信息 。 在 
类 选择 器 div 中 定义 了 边框 样式 、 高 度 和 宽带 ， 并 使 用 display 属性 设 定 层 不 显示 。JavaScript 
代码 首先 根据 ID 名 称 targetid 判断 display 的 当前 属性 值 ， 如 果 值 为 block， 就 设置 为 none， 如 
果 值 为 none， 就 设置 为 block。 

在 正 11.0 中 的 浏览 效果 如 图 15-7 所 示 ， 页 面 显示 了 一 个 超 链 接 。 当 单 击 【显示 /隐藏 】 超 
链接 时 ,会 显示 如 图 15-8 所 示 的 效果 ， 此 时 显示 一 个 DIV 层 ， 层 里 面包 含 了 图 片 和 段落 信息 。 


EC 
|S saps 
育 25m 下 , sau 


- 0 x 
ay > 


名 “D:\ 本 书 源 代 到 vcodev 国 ~ 上 


司 隐藏 和 显示 x 加 ~、 # 
请 当 百 度 一 下 ， 你 就 知道 ‘ b 
,大 
oa 


市场 价 ，390 元 


购买 价 ，190 元 


图 15-7 动态 显示 前 图 15-8 动态 显示 后 


15.3 综合 实例 1 一 一 JS 控制 表单 背景 色 和 文字 提示 


在 CSS 样式 规则 中 ， 可 以 使 用 鼠标 悬浮 特效 来 定义 超 链 接 的 显示 样式 。 利 用 这 个 特效 还 
可 以 定义 表单 的 显示 样式 , 即 当 鼠 标 指针 放 在 表单 元 素 的 上 面 时 可 以 实现 表单 背景 色 和 文字 提 
示 ， 这 里 不 是 使 用 鼠标 悬浮 特效 完成 ， 而 是 使 用 JavaScript 语句 完成 。 

具体 实现 步骤 如 下 所 示 。 

La 分 析 需 求 


要 实现 鼠标 指针 放 在 表单 元 素 上 时 其 样式 发 生变 化 ， 需 要 使 用 JavaScript 事件 完成 ， 即 鼠 
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标 onmouseover 事件 ， 当 触发 了 这 个 事件 后 就 可 以 定义 指定 元 素 的 显示 样式 。 


L@ 到 创建 HTML， 实 现 基 本 表单 


<!DOCTYPE html> 

<html> 

<head> 

<tit1le> 鼠 标 移 上 背景 变色 和 文字 提示 

</title> 

</head> 

<body> 

<hl align=center> 密 码 修 改 页 面 </h1> 

<ol id="need"> 

<li><label class="old password"> 原 始 密 码 : </1label> <input name="'' 
type='password' id='' /></1i> 

<1i><label class="new password"> 新 的 密码 : </label> <input name="'' 
type='password' id='' /><dfn> (密码 长 度 为 6~20 字 节 。 不 想 修改 请 留 空 ) </dfn></1i> 

<1i><label class="rePassword"> 重 复 密码 : </label> <input name="'' 
type='password' id='' /></1i> 

<1i><label class="email"> 邮 箱 设置 : </label> <input name='' type='text' id="'' 
/><dfn>〔 承 诺 绝 不 会 给 您 发 送 任何 垃圾 邮件 。》</afn></1i> 

</o1> 

</body> 

</html> 


在 上 面 的 代码 中 ， 创 建 一 个 无 序列 表 ， 在 无 序列 表 中 包含 一 个 表单 ， 表 单 中 则 包含 了 多 个 
表单 元 素 。 

在 下 11.0 中 的 浏览 效果 如 图 15-9 所 示 ， 可 以 看 到 页 面 显示 了 四 个 输入 文本 框 ， 每 个 文本 
框 前 面 都 带 有 序号 ， 其 中 第 二 个 和 第 四 个 文本 框 后 带 有 注解 。 


| 加 “DAH 涯 本 wodev 国 || 搜索- Pp- | 
Is 入 际 移 上 苛 虹 交 色 和 文字 提 … x | 
底 和 一 下, fx0 首 


( 医 硒 长 大 为 6 20 字 琅 ， 不 哲 桔 改 广 羽 衬 ) 


( 磺 庄 个 不 会 共 你 发 大 弛 条 二 民 斋 ff。 》 


图 15-9 表单 元 素 显示 
上 @ 添加 CSS 代码， 完成 各 种 样式 设置 


<style> 
#need{margin: 20px auto 0;width: 610px;} 
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#need li{height: 26px;width: 600px;font: 12px/26px Arial, Helvetica, 
sans-serif;background: #FFD;border-bottom: lpx dashed #E0E0E0;display: 
block;cursor: text;padding: 7px Opx 7px l0px!important;padding: 5px Opx 5px 
10pzx;} 

#need li:hover,#need li.hover {background: #FFE8E8;} 

#need input{line-height: 14px;background: #FFF;height: 14px;width: 
200px;border: lpx solid #E0E0E0;vertical-align: middle;padding: 6px;} 

#need label{padding-left: 30px;} 

#need label.old password{background-position: 0 -277px;} 

#need label.new password{background-position: 0 -1576px;} 

#need label.rePassword{background-position: 0 -1638px;} 

#need label.email{background-position: 0 -429px;} 

#need dfn{display: none;} 

#need li:hover dfn, #need li.hover dfn {display:inline;margin-left: 
Tpx;color: #676767;} 

</style> 


上 面 的 CSS 代码 定义 了 表单 元 素 的 显示 样式 ， 例 如 表单 基本 样式 、 有 序列 表 中 的 列表 项 、 
鼠标 悬浮 时 、 表 单元 素 等 显示 样式 。 

在 正 11.0 中 的 浏览 效果 如 图 15-10 所 示 ， 页 面 表单 元 素 带 有 背景 色 ， 并 且 有 序列 表 的 前 
面 序号 被 CSS 代码 去 掉 ， 表 单元 素 后 面 的 注解 也 去 掉 了 。 
| 印 ”Dx 二 书 涯 fcBNcodev 尖 LENh1 图 ”中 | 搜索 PP- 六 @ 
局 局 标 始 上 消 且 名 和 文联 - x | 下 
文件 (F) 坊 俩 (F) 坦 看 /v) 收藏 汪 (A) 工具 (T) 帮助 (H) 


记 间 百 区 一 下 ， 你 新 知 症 
| 


密码 修改 页 面 


图 15-10 CSS 样式 定义 表单 
i@ 细 添加 JavaScript 代码 ， 控 制 页 面 背景 色 


<script type="text/javascript"> 

function suckerfish (type，tag，ParentId) { 

ifE(window.attachEvent){ 

window.attachEvent ("onload", function(){ 

Var sfEls= 
(parentId==null) ?document .getElementsByTagName (tag) :document .getElementById 
(parentId) .getElementsByTagName (tag); 

type (sfEls); 

让 
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} 

} 

hover=function (sfEls){ 

for (Var i=0; i<sfEls.length; i++){ 
sfEls[i] .onmouseover=function(){ 
this.className+=" hover"; 

1 

sfEls[i] .onmouseout=function(){ 
this.className=this.className.replace (new RegExp(" hover\\b"), 
} 

} 

} 

suckerfish (hover, "1i"); 
</seript> 


上 面 的 JavaScript 代码 定义 鼠标 放 到 表单 上 时 表单 背景 色 和 提升 信息 发 生变 化 。 这 些 变 化 
都 是 使 用 JavaScript 事件 完成 的 ， 此 处 调用 了 onload 加 载 事件 、ommouseover 事件 等 。 

在 正 11.0 中 的 浏览 效果 如 图 15-11 所 示 ， 可 以 看 到 当 鼠 标 指针 放 到 第 二 个 输入 文本 框 上 
时 ， 其 背景 色 变 为 浅 红色 ， 并 且 在 文本 框 后 会 出 现 注解 。 


mn 


-Ea 
加 Di\ 本 书 源 代码 \code\ 源 代码 \ch1 图 ”| 利索. 只 - [了 
局 名 标 称 上 涯 呈 空 名 和 文字 操 
文件 月 。 编 纺 (B) 查看 M 收 蕊 炎 (A) 工具 (D。 大 R(H) 


关 各 二 区 下 ,人 0 
密码 修改 页 面 


图 15-11 JavaScript 实现 表单 特效 


15.4 综合 实例 2 一 一 实现 即时 验证 效果 


在 使 用 JavaScript 验证 数据 时 ， 有 的 HTML 元 素 要 求 立即 显示 验证 效果 ， 即 在 激活 下 一 个 
HTML 元 素 时 就 会 显示 验证 效果 ， 例 如 对 电子 邮件 、 数 据 的 验证 。 完 成 表单 元 素 的 即时 验证 ， 
需要 利用 JavaScript 事件 完成 。 此 实例 主要 判断 数据 是 否 带 有 两 个 小 数 点 ， 如 果 没 有 就 不 允许 
输入 。 

有 具体 实现 步骤 如 下 所 示 。 
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@ 和 分 析 需 求 

实现 数据 的 即时 验证 , 需要 利用 onblur 事件 , 即 当 前 文本 框 失去 焦点 时 就 会 触发 验证 处 理 
程序 对 当前 数据 验证 。 首 先 获取 输入 数据 ， 然 后 利用 过 条 件 语句 判断 当 前 数据 格式 ,最 后 判断 
数据 是 否 符合 格式 。 


2 创建 HIML， 实 现 基本 表单 元 素 


<!DOCTYPE html> 

<html> 

<head> 

<title> 数 字 即 时 验证 </title> 

</head> 

<body > 

<h3> 数 字 即 时 验证 </h3> 

<form name="myForm"> 

金额 : 

<input type="text" id="aaa" name="aaa" value="0.00" 
onblur="checkDecimal (this);"><br /></br> 

合计 : 

<input type="text" id="bbb" name="bbb" ><br /></br> 

</form> 

</body> 

</html> 


在 HTML 代码 中 ， 创 建 了 一 个 表单 ， 表 单 中 包含 两 个 文本 输入 框 ， 其 中 第 一 个 文本 输入 


框 定义 了 onblur 事件 ， 即 失去 焦点 事件 。 
在 正 11.0 中 的 浏览 效果 如 图 15-12 所 示 ， 页 面 中 显示 了 一 个 表单 ， 包 括 两 个 文本 域 。 此 


时 在 第 一 个 文本 框 输入 信息 ， 无 任何 提示 。 


站 ”DA 本 书 源 代码 Ycode 涝 图。 中 搜索- 


屋 数字 即时 验证 外 
文件 (F) ”编辑 (E) 查看 (V) 收藏 夫 (A) 工具 (D 帮助 (H) 


兽人 百度 一 下 ， 你 8 知道 


数字 即时 验证 
金额 : |123 


图 15-12 验证 前 显示 
i@ 引 添加 JavaScript， 实 现 基本 数据 验证 


<script type="text/javascript"> 

function checkDecimal (element){ 

Var tmp=element .value.split(".") 

if(!isNaN(element .value)){ 
if(tmp.length!=2||tmp[1] .length!=2){ 
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document .myForm.aaa.focus(); 
//document .getElementByName ("name") .focus(); 
alert ("输入 金额 请 保留 2 位 小 数 ! ") ; 
document .getElementById('aaa') .value="0.00'7 
return false; 
上 

elsef{ 

alert ("输入 金额 必须 是 数字 类 型 ! ") ; 
document .getElementById('aaa') .focus (); 
document .getElementById('aaa') .value="'0.00'; 
return false; 
} 

} 

</SCript> 


在 上 面 的 代码 中 ， 函 数 checkDecimal 的 第 一 个 语句 “element.value.split(".")” 表 示 获 取 当 
前 的 第 一 个 HTML 元 素 输入 值 ， 并 将 这 个 值 进行 拆 分 ， 其 分 隔 符 为 “.”。 下 面 使 用 站 语句 判 
断 第 一 个 HTML 元 素 输入 值 是 否 为 数字 ， 如 果 不 为 数字 ， 就 提示 重新 输入 ， 焦 点 保留 在 一 个 
文本 框 中 。 如 果 为 数字 ， 就 判断 temp 数组 的 值 ， 即 temp[1] 的 值 长 度 是 否 为 2， 若 长 度 为 2 则 
格式 正确 ， 否 则 提示 重新 输入 。 

在 正 11.0 中 的 浏览 效果 如 图 15-13 所 示 ， 可 以 看 到 在 第 一 个 文本 框 输入 值 123 后 ， 如 果 
鼠标 指针 放 到 第 二 个 文本 框 就 会 弹出 一 个 对 话 框 ， 提 示 当 前 输入 值 不 符合 格式 。 


= 口 x 
间 DA 本 书 源 代码 \code 图 ”搜索 
生 数字 即时 验证 x | 回 
文件 (F) 编辑 [6) 理 看 (V) 收藏 去 (A) 工具 (T) 织 助 (H) 
请 各 百度 下, 你 Mx0 道 


数字 即时 验证 。 | smoyse x 


金额 : |0.00 
合计 : 企 输入 全 闫 请 保留 2 位 小 数 | 


Ce | 


图 15-13 数据 即时 验证 


15.5 ”专家 解 惑 


1. 试 说 明 JS 中 innerHTML 与 innerText 的 用 法 与 区 别 。 
假设 现在 有 一 个 DIV 层 ， 如 下 所 示 。 


<div id="test"> 
<span style="color:red">testl</span> test2 
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</div> 

innerText 属性 表示 从 起 始 位 置 到 终止 位 置 的 内 容 , 但 它 去 除 HIML 标记 。 例如 ， 上面 示 例 
的 innerText 的 值 也 就 是 “testl test2”， 其 中 span 标记 去 除了 。 

innerHTML 属性 除了 全 部 内 容 外 , 还 包含 对 象 标 记 本 身 。 例 如 ,上 面 示例 的 text.outerHTML 
的 值 就 是 <div id="test"><span style="color:red">test1</span> test2</div>。 

2. JS 如 何 控制 换行 ? 

无 论 使 用 哪 种 引号 创建 字符 串 ， 字 符 串 中 间 都 不 能 包含 强制 换行 符 。 

Var temp='<h2 class="a">A list</h2> 


<O1> 
</ol>'; 


上 面 的 写法 是 错误 的 。 正 确 写法 是 使 用 反 斜 杠 来 转 义 换行 符 。 


var temp='<h2 class="a">A list</h2>\ 
<ol>\ 
</o01>"' 


»340* 


第 16 章 HTML5 绘 制图 形 


HTMLS5 呈现 了 很 多 新 特性 ， 这 在 之 前 的 HTML 中 是 见 不 到 的 。 其 中 一 个 最 值得 提 及 的 特 
性 就 是 HTML 的 <canvas> 标 记 ， 可 以 对 2D 或 位 图 进行 动态 、 脚 本 的 泻 染 。canvas 是 一 个 矩形 
区 域 ， 使 用 JavaScript 可 以 控制 其 每 一 个 像素 。 


16.1 canvas 概述 


canvas 是 一 个 新 的 HTML 元素， 可 以 被 Script 语言 (通常 是 JavaScript) 用 来 绘制 图 形 。 
例如 ， 可 以 用 它 来 画图 、 合 成 图 像 或 做 简单 的 动画 。 


16.1.1 添加 canvas 元 素 


<canvas> 标 记 是 一 个 矩形 区 域 ， 包 含 width 和 height 两 个 属性 ， 分 别 表示 和 矩形 区 域 的 宽度 
和 高 度 。 这 两 个 属性 都 是 可 选 的 ， 并 且 都 可 以 通过 CSS 来 定义 ， 其 默认 值 是 300px 和 150px。 

canvas 在 网 页 中 的 常用 形式 如 下 : 

<canvas id="myCanvas" width="300" height="200" style="border:lpx solid 
#c3c3E37> 


Your browser does not support the canvas element. 
</canvas> 


在 上 面 的 示例 代码 中 ，id 表示 画布 对 象 名 称 ，width 和 height 分 别 表示 宽度 和 高 度 ， 最 初 
的 画布 是 不 可 见 的 ， 此 处 为 了 观察 这 个 矩形 区 域 ， 使 用 CSS 样式 ， 即 <style> 标 记 。style 表示 
画布 的 样式 。 如 果 浏 览 器 不 支持 画布 标记 ， 就 会 显示 画布 中 间 的 提示 信息 。 

画布 canvas 本 身 不 具有 绘制 图 形 的 功能 ， 只 是 一 个 容器 ， 如 果 读 者 对 于 Java 语言 有 所 了 
解 ， 就 会 发 现 HIMLS 的 画布 和 Java 中 的 Panel 面板 非常 相似 ， 都 可 以 在 容器 中 绘制 图 形 。 既 
然 canvas 画布 元 素 放 好 了 ， 就 可 以 使 用 脚本 语言 JavaScript 在 网 页 上 绘制 图 像 。 

使 用 canvas 结合 JavaScript 绘制 图 形 ， 一 般 情况 下 需要 下 面 几 个 步骤 。 


i@ 册 JavaScript 使 用 id 来 寻找 canvas 元 素 ， 即 获取 当前 画布 对 象 。 
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Var c=document .getElLementByYId ("myCanVas") 7 
罗 22 创建 context 对 象 
Var cxt=c.getContext ("2d"); 


getContext 函数 返回 一 个 指定 contextId 的 上 下 文 对 象 ， 如 果 指 定 的 id 不 被 支持 ， 就 返回 
null。 当 前 唯一 被 强制 必须 支持 的 是 2D， 也 许 在 将 来 会 有 3D。 注 意 ， 指 定 的 id 是 大 小 写 敏感 
的 。 对 象 cxt 建立 之 后 ， 就 可 以 拥有 多 种 绘制 路 径 、 和 矩形 、 圆 形 、 字 符 以 及 添加 图 像 的 方法 。 


绘制 图 形 


cxt .fillstyle="#FF0000"; 

ext filliRectE(0 0 L150 75)s 

fillStyle 函数 将 其 染 成 红色 。fillRect 函数 规定 了 形状 、 位 置 和 尺寸 ， 这 两 行 代码 绘制 一 个 
红色 的 矩形 。 


16.1.2 ”绘制 矩形 

单独 的 一 个 <canvas> 标 记 只 是 在 页 面 中 定义 了 一 块 矩 形 区 域 ， 并 无 特别 之 处 ， 开 发 人 员 只 
有 配合 使 用 JavaScript 脚本 才能 够 完成 各 种 图 形 、 线 条 以 及 复杂 的 图 形变 换 操作 。 与 基于 SVG 
来 实现 同样 绘图 效果 来 比较 ，canvas 绘图 是 一 种 像素 级 别 的 位 图 绘图 技术 ， 而 SVG 则 是 一 种 
矢量 绘图 技术 。 

使 用 canvas 和 JavaScript 绘制 一 个 矩形 ， 可 能 会 涉及 一 个 或 多 个 函数 ， 这 些 函 数 如 表 16-1 
所 示 。 


表 16-1 绘制 函数 


fillRect 绘制 一 个 矩形 ， 这 个 矩形 区 域 没有 边框 ， 只 有 填充 色 。 这 个 函数 有 四 个 参数 ， 前 两 个 表 
示 左 上 角 的 坐标 位 置 ， 第 三 个 参数 为 长 度 ， 第 四 个 参数 为 高 度 


strokeRect | 函数 绘制 一 个 带 边 框 的 矩形 。 该 方法 的 四 个 参数 的 解释 同上 
clearRect 清除 一 个 矩形 区 域 ， 被 清除 的 区 域 将 没有 任何 线条 。 该 函数 的 四 个 参数 的 解释 同上 


【 例 16.1】〔 实 例文 件 : ch16\16.1.html) 

<!DOCTYPE html> 

<html> 

<body> 

<canvas id="myCanvas" width="300" height="200" style="border:lpx solid 
blue"> 
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Your browser does not support the canvas element. 
</canvas> 

<script type="text/javascript"> 

Var c=document .getElementById ("myCanvas"); 

Var cxt=c.getContext ("2d"); 

cxt .fillstyle="rgb (0,0,200)"; 

cxt .fillRect (10,20,100,100); 

</script> 

</body> 

</html> 


在 上 面 的 代码 中 ， 首 先 定义 一 个 画布 对 象 ， 其 id 名 称 为 myCanvas， 其 高 度 和 宽度 分 别 为 
200px 和 300px， 并 定义 了 画布 边框 显示 样式 。 在 JavaScript 代码 中 ， 首 先 获取 画布 对 象 ， 然 后 
使 用 getContext 获 取 当 前 2d 的 上 下 文 对 象 ,并 使 用 flIRect 绘 制 一 个 矩形 。 其 中 涉及 一 个 flStyle 
属性 ，fillstyle 用 于 设 定 填充 的 颜色 、 透 明度 等 ,如 果 设 置 为 “rgb(200.0.0)”， 就 表示 一 个 颜色 ， 
不 透明 ; 如 果 设 为 “rgba(0,0,200,0.5)”， 就 表示 一 个 颜色 ， 透 明度 为 50%。 

在 正 11.0 中 的 浏览 效果 如 图 16-1 所 示 ， 在 一 个 蓝 色 边框 中 显示 了 一 个 蓝 色 矩形。 

可 “Di 本 书 源 人 码 Kode 国 ”| 搜索 
| 人 DA 着 fodevPf x 加 


文件 () 弦 误 [Fj 查看 (V) 收藏 夫 (A) 工具 (D) 帮助 (H) 
请 人 百度 一 下 ， 人 BO 


图 16-1 绘制 矩形 


16.2 绘制 基本 形状 


画布 canvas 结合 JavaScript 不 仅 可 以 绘制 简单 的 矩形 ， 还 可 以 绘制 一 些 其 他 的 常见 图 形 ， 
例如 直线 、 圆 等 。 


16.2.1 绘制 圆 形 


基于 canvas 的 绘图 并 不 是 直接 在 <canvas> 标 记 所 创建 的 绘图 画面 上 进行 各 种 绘图 操作 , 而 
是 依赖 画面 所 提供 的 泻 染 上 下 文 (Rendering Context) ， 所 有 的 绘图 命令 和 属性 都 定义 在 泻 染 
上 下 文 当中 。 在 通过 canvas id 获取 相应 的 DOM 对 象 之 后 首先 要 做 的 事情 就 是 获取 演 染 上 下 文 
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对 象 。 演 染 上 下 文 与 canvas 一 一 对 应 ， 无 论 对 同一 canvas 对 象 调用 几 次 getContext0 函 数 ， 都 
将 返回 同一 个 上 下 文 对 象 。 
在 画布 中 绘制 圆 形 ， 可 能 要 涉及 表 16-2 所 示 的 几 个 函数 。 


表 16-2 绘制 函数 


功能 
beginPath() 开始 绘制 路 径 


arc(x,y,radius,startAngle， | x 和 y 定义 的 是 圆 的 原点 , radius 定义 的 是 圆 的 半径 ; startAngle 和 endAngle 
endAngle,anticlockwise) ”| 是 弧度 , 不 是 度数 ; anticlockwise 是 用 来 定义 画 圆 的 方向 , 值 是 true 或 false 


closePath() 结束 路 径 的 绘制 
fillO 进行 填充 
路 径 是 绘制 自 定义 图 形 的 好 方法 ,在 canvas 中 通过 beginPath0 函 数 开始 绘制 路 径 ， 这 时 就 
可 以 绘制 直线 、 曲 线 等 ,绘制 完成 后 调用 fl10 和 stroke0 完 成 填充 和 设置 边框 ， 通 过 closePath() 
函数 结束 路 径 的 绘制 。 


【 例 16.2】〔 实 例文 件 ，ch16\16.2.html) 


<!DOCTYPE html> 

<html> 

<body> 

<canvas id="myCanvas" width="200" height="200" style="border:lpx solid 
blue"> 

Your browser does not support the canvas element. 

</canvas> 

<script type="text/javascript"> 

Var c=document .getElementById("myCanvas"); 

Var cxt=c.getContext ("2d"); 

cxt.fillstyle="#FFaa00"; 

cxt .beginPath (); 

cxt.arc(70,18,15,0,Math.PI*2,true); 

cxt .closePath(); 

tn 

</script> 

</body> 

</html> 


在 上 面 的 JavaScript 代码 中 ,使 用 beignPath 函数 开启 一 个 路 径 ， 然 后 绘制 一 个 圆 形 ， 下 面 
关闭 这 个 路 径 并 填充 。 
在 正 11.0 中 的 浏览 效果 如 图 16-2 所 示 ， 在 和 矩形 边框 中 显示 了 一 个 黄色 的 圆 。 
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- OO x 
着 ”DA 本 书 源 代码 \code 浊 图 ~ 起。 搜索. 
大 D:\ 本 书 源 代码 \code\ 源 代 .. x | 
文件 (F) ”篇 辑 (E) ”查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 
育 凋 百度 -下 , 你 信 和 0 首 


图 16-2 绘制 椭圆 


16.2.2 ”使 用 moveTo 与 lineTo 绘制 直线 

在 每 个 canvas 实例 对 象 中 都 拥有 一 个 path 对 象 ， 创 建 自 定义 图 形 的 过 程 就 是 不 断 对 path 
对 象 操作 的 过 程 。 每 当 开始 一 次 新 的 图 形 绘制 任务 ， 都 需要 先 使 用 beginPath0 函 数 来 重 置 path 
对 象 至 初始 状态 , 进而 通过 一 系列 对 moveTo/lineTo 等 画 线 函 数 的 调用 绘制 期 望 的 路 径 。 其 中 ， 
moveTo(x, y) 函 数 设 置 绘 图 起 始 坐标 ，lineTo(x,y) 等 画 线 函数 可 以 从 当前 起 点 绘制 直线 、 圆 弧 以 
及 曲线 到 目标 位 置 。 最 后 一 步 ， 也 是 可 选 的 步骤 ， 即 调用 closePath() 函 数 将 自 定义 图 形 进行 闭 
合 。 该 函数 将 自动 创建 一 条 从 当前 坐标 到 起 始 坐标 的 直线 。 

绘制 直线 常用 的 函数 是 moveTo 和 lineTo， 其 含义 如 表 16-3 所 示 。 


表 16-3 ”绘制 函数 


moveTo(x,y) 不 绘制 ， 只 是 将 当前 位 置 移动 到 新 目标 坐标 x,y〉 ， 并 作为 线条 开始 点 

lineTo(x,y) 绘制 线条 到 指定 的 目标 坐标 (x,y)， 并 且 在 两 个 坐标 之 间 画 一 条 直线 。 不 管 调用 哪 一 
个 ， 都 不 会 真正 画 出 图 形 ， 因 为 还 没有 调用 stroke 绘制) 和 fil (填充 ) 函数 。 当 
前 ， 只 是 在 定义 路 径 的 位 置 ， 以 便 后 面 绘制 时 使 用 


strokeStyle 指定 线条 的 颜色 


lineWidth 设置 线条 的 粗细 


【 例 16.3】〔 实 例文 件 ，ch16\16.3.html) 
<!DOCTYPE html> 

<html> 

<body> 
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<canvas id="myCanvas" width="200"” height="200" style="border:lpx solid 
blue"> 

Your browser does not support the canvas element. 

</canvas> 

<script type="text/javascript"> 

Var c=document .getElementById ("myCanvas"); 

Var cxt=c.getContext ("2d"); 

cxt .beginPath (); 

cxt .strokestyle="rgb(0,182,0)"; 

cxt .moveTo (10,10); 

cxt.lineTo(150, 50); 

cxt.lineTo (10,50); 

cxt.lineWidth=14; 

cxt.stroke () 7 

cxt.closePath () 7 

</script> 

</body> 

</html> 


在 上 面 的 代码 中 ， 使 用 moveTo 函数 定义 一 个 坐标 位 置 (10,10) ， 以 此 坐标 位 置 为 起 点 绘 
制 两 条 不 同 的 直线 ， 并 使 用 lineWidth 设置 直线 的 宽带 、 使 用 strokeStyle 设置 直线 的 颜色 、 使 
用 lineTo 设置 两 个 不 同 直线 的 结束 位 置 。 

在 正 11.0 中 的 浏览 效果 如 图 16-3 所 示 ， 网 页 中 绘制 了 两 个 直线 ， 这 两 个 直线 在 某 一 点 交叉 。 


oOo x 
各 D:\ 太 书 源 代 码 CodeV 图 ”他 | 搜索 了 
|@ Dx 二 书 原 KBVcodev 和 fx | 
文件 (F) 编辑 (5 查看 (V) 收藏 天 (A) 工具 (D) 帮助 (H) 
将 站 百度 一 下 ， 你 Bi 和 着 


me 


图 16-3 绘制 直线 


16.2.3 ”使 用 bezierCurveTo 绘制 贝 塞 尔 曲线 
在 数学 的 数值 分 析 领域 中 ， 贝 塞 尔 曲线 (Bezier 曲线 ) 是 电脑 图 形 学 中 相当 重要 的 参数 曲 
线 。 更 高 维度 的 广泛 化 贝 塞 尔 曲线 就 称 作 贝 塞 尔 曲面 ， 其 中 贝 塞 尔 三 角 是 一 种 特殊 的 实例 。 
bezierCurveTo0 表 示 为 一 个 画布 的 当前 子路 径 添加 一 条 三 次 贝 塞 尔 曲线 。 这 条 曲线 的 开始 
点 是 画布 的 当前 点 , 结束 点 是 (x, y). 两 条 贝 塞 尔 曲线 控制 点 (cpX1, cpY1) 和 (cpX2, cpY2) 定 
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义 了 曲线 的 形状 。 当 这 个 方法 返回 的 时 候 ， 当 前 的 位 置 为 (x, y)。 
方法 bezierCurveTo 的 具体 格式 如 下 所 示 。 


bezierCurveTo (CPX1， cpYl, cpX2, cpY2, x, y) 
其 参数 的 含义 如 表 16-4 所 示 。 
表 16-4 ”参数 的 含义 


cpX1, cpY1 和 曲线 的 开始 点 〈 当 前 位 置 ) 相关 联 的 控制 点 的 坐标 


cpX2, cpY2 和 曲线 的 结束 点 相关 联 的 控制 点 的 坐标 
4 曲线 的 结束 点 的 坐标 


【 例 16.4】 《实例 文件 : ch16\16.4.html) 


<!DOCTYPE html> 


<html> 

<head> 
<title> 贝 塞 尔 曲 线 </title> 
<script> 


function draw(id) 
Var canvas=document .getElementById (id); 
if(canvas==null) 
return false; 
Var context=canvas.getContext ('2d'); 
context .fillstyle="#eeeeff"; 
context.fillRect (0,0,400,300); 
var n=0; 
Var dx=1507 
Var dy=150; 
Var s=100; 
context .beginPath () 7 
context .globalCompositeOperation='and'; 
context .fillstyle='rgb(100,255,100)"'; 
Context. strokeStyle='rgb(0,0,100) "7 
Var x=Math.sin(0); 
Var y=Math.cos(0); 
Var dig=Math.PI/15*11; 
fEor (var i=0;i<30;i++) 
{ 
Var x=Math.sin(i*dig); 
Var y=Math.cos (i*dig); 


context .bezierCurveTo (dx+x*s, dy+y*s—-100, dx+x*s+100,dy+y*S, dx+x*s, dy+y*s 
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下 
context.closePath(); 
context .fill(); 
context.stroke (); 
} 
</script> 
</head> 
<body onload="draw('canvas');"> 
<h1> 绘 制 元素 </h1> 
<canvas id="canvas" width="400" height="300" /> 
</body> 
</html> 


在 上 面 的 函数 draw 中 ， 首 先 使 用 语句 “fillRect(0.0.400.300)” 绘 制 了 一 个 矩形 ， 大 小 和 画 
布 相同 ， 填 充 颜色 为 浅 青色 ;接着 定义 几 个 变量 ， 用 于 设 定 曲线 的 坐标 位 置 ， 在 for 循环 中 使 
用 bezierCurveTo 绘制 贝 塞 尔 曲线 。 

在 正 11.0 中 的 浏览 效果 如 图 16-4 所 示 ， 在 网 页 中 显示 了 一 个 贝 塞 尔 曲 线 。 


地， 六 


全 D\ 李 书 源 代码 \code 灿 图 ”| 地 从 


局 贝 来 尔 曲 线 x 
文件 (F] 六 强 (E) 本 看 (V) 以 茂 天 (A) 工具 (T) 帮助 (H) 
痉 当 百 度 一 下 ， 人 Si50 首 


绘制 元 素 


图 16-4 贝 塞 尔 曲线 


16.3 ”绘制 渐变 图 形 


渐变 是 两 种 或 更 多 颜色 的 平滑 过 渡 ， 是 指 在 颜色 集 上 使 用 逐步 抽样 算法 ， 并 将 结果 应 用 于 
描 边 样式 和 填充 样式 中 。canvas 的 绘图 上 下 文 支持 两 种 类 型 的 渐变 : 线性 渐变 和 放射 性 渐变 ， 
其 中 放射 性 渐变 也 称 为 径 向 渐变 。 
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16.3.1 绘制 线性 渐变 
创建 一 个 简单 的 渐变 非常 容易 ， 比 使 用 Photoshop 还 要 快 ， 使 用 渐变 需要 三 个 步骤 。 


L 鸭 创建 浙 变 对 条 

var gradient=cxt.createLinearGradient (0,0,0,canvas -height) 7 

L 国 为 渐变 对 象 设置 颜色 ， 指 明 过 渡 方式 

gradient .adqdColorStop (0, '#fff"'); 

gradient .adqdColorStop (1，'#0007)7 

t@Q 旨 在 context 上 为 填充 样式 或 者 描 边 样式 设置 渐变 

cxt.fillstyle=gradient; 

要 设置 显示 颜色 , 在 渐变 对 象 上 使 用 addColorStop 函数 即 可 。 除 了 可 以 变换 成 其 他 颜色 外 ， 
还 可 以 为 颜色 设置 alpha 值 〈 例 如 透明 ) ， 并 且 alpha 值 也 是 可 以 变化 的 。 为 了 达到 这 样 的 效 
果 ， 需 要 使 用 颜色 值 的 另 一 种 表示 方法 ， 例 如 内 置 alpha 组 件 的 CSSrgba 函数 。 

绘制 线性 渐变 会 使 用 到 表 16-5 所 示 的 几 个 函数 。 


表 16-5 绘制 函数 


lw | 


addColorStop 函数 允许 指定 两 个 参数 : 颜色 和 偏 移 量 。 颜 色 参 数 是 指 开发 人 员 希 


望 在 偏 移 位 置 描 边 或 填充 时 所 使 用 的 颜色 。 偏 移 量 是 一 个 0.0 到 1.0 
之 间 的 数值 ， 代 表 沿 着 渐变 线 渐变 的 距离 有 多 远 


沿 着 直线 从 (x0y0) 至 (xl.yD 绘 制 渐变 


【 例 16.5】〔 实 例文 件 ，ch16\16.5.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 线 性 渐变 </title> 

</head> 

<body> 

<h1> 绘 制 线性 渐变 </h1> 

<canvas id="canvas" width="400" height="300" style="border:1px solid red"/> 
<script type="text/javascript"> 

Var c=document .getElementById ("canvas"); 

Var cxt=c.getContext ("2d"); 

Var gradient=cxt.createLinearGradient (0,0,0,canvas.height); 
gradient .addColorSstop (0, '#fff"); 

gradient.addColorstop(1, "#000°'); 
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cxt .fillstyle=gradient; 

cxt .fillRect (0,0,400,400); 

</script> 

</body> 

</html> 

上 面 的 代码 使 用 2D 环境 对 象 产生 了 一 个 线性 渐变 对 象 ， 渐 变 的 起 始点 是 (0，0〉 ， 渐 变 
的 结束 点 是 (0，canvas.height) ， 下 面 使 用 addColorStop 函数 设置 渐变 颜色 ， 最 后 将 渐变 填充 
到 上 下 文 环境 的 样式 中 。 

在 正 11.0 中 的 浏览 效果 如 图 16-5 所 示 ， 在 网 页 中 创建 了 一 个 垂直 方向 上 的 渐变 ， 从 上 到 
下 颜色 逐渐 变 深 。 


图 16-5 ”线性 渐变 


16.3.2 ”绘制 径 向 渐变 

除了 线性 渐变 以 外 ，HTML5 Canvas API 还 支持 放射 性 渐变 。 所 谓 放 射 性 渐变 ， 就 是 颜色 
会 介 于 两 个 指定 圆 间 的 锥 形 区 域 平滑 变化 。 放 射 性 渐变 和 线性 渐变 使 用 的 颜色 终止 点 是 一 样 
的 。 如 果 要 实现 放射 性 渐变 ， 即 径 向 渐变 ， 需 要 使 用 函数 createRadialGradient。 

createRadialGradient(x0.y0.r0.xl.ylrl) 函 数 表示 沿 着 两 个 圆 之 间 的 锥 面 绘制 渐变 。 其 中 ,前 
三 个 参数 代表 开始 圆 的 圆心 为 (x0.y0)，, 半径 为 r0; 最 后 三 个 参数 代表 结束 圆 的 圆心 为 (x1,y1)， 
半径 为 rl。 

【 例 16.6】“《 实 例文 件 : ch16\16.6.html) 


<!DOCTYPE html> 

<html> 

<head> 
<title> 径 向 渐变 </title> 
</head> 

<body> 

<h1> 绘 制 径 向 渐变 </h1> 


<canvas id="canvas" width="400" height="300" style="border:1px solid red"/> 
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<script type="text/javascript"> 

Var c=document .getElementById("canvas"); 

Var cxt=c.getContext ("2d"); 

var 
gradient=cxt .createRadialGradient (canvas.width/2,canvas.height/2,0,canvas.w 
idth/2, canvas.height/2,150); 

gradient .addColorStop (0, '#fff"'); 

gradient .addColorSstop(1, '#000°'); 

cxt .fillstyle=gradient; 

cxt.fillRect (0,0,400,400); 

</script> 

</body> 

</html> 


在 上 面 的 代码 中 ， 首 先 创 建 渐变 对 象 gradient， 此 处 使 用 方法 createRadialGradient 创建 了 
-个 径 向 渐变 ， 下 面 使 用 addColorStop 添加 颜色 ， 最 后 将 渐变 填充 到 上 下 文 环境 中 。 
在 正 11.0 中 的 浏览 效果 如 图 16-6 所 示 ， 从 圆 的 中 心 亮点 开始 ， 向 外 逐步 发 散 ， 形 成 了 一 
个 径 向 渐变 。 
加 DD:\ 本 书 滨 代 码 Vcode 涟 图 ”| 搜索 只 - 
| Be 


文件 月 、 编 纺 (日 至 看 V) 收 节 天 (A) 工具 (T 共 动 (H) 
将 当下 区 一 下 ， 作 9 和正 


绘制 径 向 渐变 


图 16-6 径 向 渐变 


16.4 ”绘制 变形 图 形 


画布 canvas 不 但 可 以 使 用 moveTo 这 样 的 方法 来 移动 画笔 、 绘 制图 形 和 线条 , 还 可 以 使 用 
变换 来 调整 画笔 下 的 画布 。 变 换 的 方法 包括 旋转 、 缩 放 、 变 形 和 平移 等 。 
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16.4.1 变换 原点 坐标 


平移 (translate) 即将 绘图 区 相对 于 当前 画布 的 左上 角 进 行 平移 ， 如 果 不 进行 变形 ， 绘 图 
区 原点 和 画布 原点 是 重 琶 的 ， 绘 图 区 相当 于 画图 软件 里 的 热 区 或 当前 层 。 如 果 进 行 变 形 ， 则 坐 
标 位 置 会 移动 到 一 个 新 位 置 。 

如 果 要 对 图 形 实现 平移 ， 需 要 使 用 函数 translate (x，y) ， 该 函数 表示 在 平面 上 平移 ， 即 
以 原来 的 原点 为 参考 , 然后 以 偏 移 后 的 位 置 作为 坐标 原点 。 也 就 是 说 , 原来 坐标 在 (100,100) ， 
然后 translate (1，1) ， 则 新 的 坐标 原点 在 〈101,101〉， 而 不 是 (1,1) 。 


【 例 16.7】〔 实 例文 件 ，ch16\16.7.html) 
<!DOCTYPE html> 
<html> 
<head> 
<title> 绘 制 坐 标 变换 </title> 
<script> 
function draw(id) 
上. 
var canvas=document .getElementById (id); 
if(canvas==null) 
return false; 
Var context=canvas.getContext ('2d'); 
context .fillstyle="#eeeeff"; 
context .fillRect (0,0,400,300); 
context.translate(200,50); 
context .fillstyle='rgba(255,0,0,0.25)'; 
for (Var i=0;i<50;i++){ 
Context .translate (25,25) 
context.fill1Rect(0,0,100,50) 7 
上 
} 
</script> 
</head> 
<body onload="draw('canvas');"> 
<h1> 变 换 原 点 坐标 </h1> 
<canvas id="canvas" width="400" height="300" /> 
</body> 
</html> 


在 draw 函数 中 ， 使 用 fillRect 函数 绘制 了 一 个 矩形 ， 然 后 使 用 translate 函数 平移 到 一 个 新 
位 置 ， 并 从 新 位 置 开 始 使 用 for 循环 连续 移动 多 次 坐标 原点 ， 即 多 次 绘制 矩形 。 

在 正 11.0 中 的 浏览 效果 如 图 16-7 所 示 ， 从 坐标 位 置 200.50) 开始 绘制 矩形 ， 并 且 每 次 
以 指定 的 平移 距离 绘制 矩形 。 
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司 ”DA 本 书 源 代 三 \codeW 图 ”| 控 雪 - ph- nn 
司 给 制 坐标 安 漳 x 

文件 fF 和 二 硬 V) 收 训 天 A) 工具 项 贡 (1) 

音 间 百 后 一 下 , 你 束 知 下 


变换 原点 坐标 


图 16-7 变换 坐标 原点 


16.4.2 图形 缩放 

对 于 变形 图 形 来 说 ， 其 中 最 常用 的 方式 就 是 对 图 形 进行 缩放 ， 即 以 原来 的 图 形 为 参考 ， 放 
大 或 者 缩小 图 形 ， 从 而 增加 效果 。 

如 果 要 实现 图 形 缩放 ， 就 需要 使 用 scale(x,y) 函 数 。 该 函数 带 有 两 个 参数 ， 分 别 代表 在 x,y 
两 个 方向 上 的 值 。 每 个 参数 在 canvas 显示 图 像 的 时 候 ， 向 其 传递 在 本 方向 轴 上 图 像 要 放大 (或 
者 缩小 ) 的 量 。 如 果 x 值 为 2， 就 代表 所 绘制 图 像 中 的 全 部 元 素 都 会 变 成 两 倍 宽 。 如 果 y 值 为 
0.5， 绘 制 出 来 的 图 像 全 部 元 素 都 会 变 成 之 前 的 一 半 高 。 


【 例 16.8】 《实例 文件 :chl6\16.8.html) 
<!DOCTYPE html> 


<html> 

<head> 
<title> 绘 制图 形 缩放 </title> 
<script> 


function draw(id) 

和 
Var canvas=document .getElementById (id); 
if(canvas==null) 
return false; 
Var context=canvas.getContext('2d'); 
context .fillstyle="#eeeeff"; 
context .fillRect (0,0,400,300); 
context.translate(200,50); 
context .fillstyle='rgba (255,0,0,0.25)"'; 
for (Var i=0;i<50;i++){ 

Context .scale(3,0.5)7 
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context .fillRect (0,0,100,50); 
于 
} 

</script> 
</head> 
<body onload="draw('canvas');"> 
<h1> 图 形 缩放 </h1> 
<canvas id="canvas" width="400" height="300" /> 
</body> 
</html> 


在 上 面 的 代码 中 ， 实 现 缩放 操作 是 放 在 for 循环 中 完成 的 。 在 此 循环 中 ， 以 原来 的 图 形 为 
参考 物 ， 使 其 在 x 轴 方 向 增加 为 3 倍 宽 、y 轴 方 向 减少 为 原来 的 一 半 。 
在 正 11.0 中 的 浏览 效果 如 图 16-8 所 示 ， 在 一 个 指定 方向 上 绘制 了 多 个 矩形 。 


包 ”DA 本 书 源 fR\codev 图 -已 | 控 索 - 局 - 


局 绘制 可 开 绩 故 x 
文件 (F) 物 策 (日 坦 看 fV) 收藏 夫 (A) 工具 [T) 帮助 (H) 
启 侧 百度 一 下 ,你 30 下 


图 形 缩放 


图 16-8 图 形 缩放 


16.4.3 ”旋转 图 形 

变换 操作 并 不 限于 缩放 和 平移 ， 还 可 以 使 用 函数 context.rotate(angle) 来 旋转 图 像 ， 甚 至 可 
以 直接 修改 底层 变换 矩阵 以 完成 一 些 高 级 操作 ， 如 剪裁 图 像 的 绘制 路 径 。 例 如 ， 
contextrotate(1.57) 表 示 旋 转角 度 参 数 以 弧度 为 单位 。 

rotate0 函 数 默 认 从 左上 端的 (0,0) 开始 旋转 ， 通 过 指定 一 个 角度 ,改变 了 画布 坐标 和 Web 
浏览 器 中 的 <canvas> 元 素 像素 之 间 的 映射 ， 使 得 任意 后 续 绘图 在 画布 中 都 显示 为 旋转 的 。 它 并 
没有 旋转 <canvas> 元 素 本 身 。 注 意 ， 这 个 角度 是 用 弧度 指定 的 。 


【 例 16.9】〔 实 例文 件 : ch16\16.9.htnl) 
<!DOCTYPE html> 
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<html> 

<head> 
<title> 绘 制 旋转 图 像 </title> 
<script> 


function draw(id) 
{ 
Var canvas=document .getElementById (id); 
if(canvas==null) 
return false; 
Var context=canvas.getContext ('2d'); 
context .fillStyle="#eeeeff"; 
context.fillRect (0,0,400,300); 
context.translate(200,50); 
context.fillstyle='rgba(255,0,0,0.25)'; 
for (Var i=0;i<50;i++){ 
context .rotate (Math .PI/10); 
context .fillRect (0,0,100,50); 


} 
</script> 
</head> 
<body onload="draw('canvas');"> 
<h1> 旋 转 图 形 </h1> 
<canvas id="canvas" width="400" height="300" /> 
</body> 
</html> 


在 上 面 的 代码 中 ， 使 用 rotate 函数 在 for 循环 中 对 多 个 图 形 进行 了 旋转 ， 且 旋转 角度 相同 。 
在 下 11.0 中 的 浏览 效果 如 图 16-9 所 示 ， 在 显示 页 面 上 多 个 矩形 以 中 心 弧度 为 原点 进行 旋 


| 可 De 本 书 王 fRwodeW 国 ” 叫 | 挖 天 DP- 
登 妾 到 法 针 加 像 = 3 

文件 (F) 特 久 (二 看 (V) 收藏 A] 工具 (D) 闪失 (H) 

请 EE- 下 . fw 


旋转 图 形 


图 16-9 旋转 图 形 
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16.5 ”图形 组 合 


在 前 面 介绍 的 章节 中 ,可 以 将 一 个 图 形 画 在 另 一 个 图 形 之 上 , 但 是 大 多 数 情 况 下 这 样 是 不 
够 的 ， 会 受制 于 图 形 的 绘制 顺序 。 不 过 ， 我 们 可 以 利用 globalCompositeOperation 属性 来 改变 
这 些 做 法 ,不仅 可 以 在 已 有 图 形 后 面 再 画 新 图 形 ， 还 可 以 用 来 遮盖 、 清 除 ( 比 clearRect 函数 方 
便 得 多 ) 某 些 区 域 。 

其 语法 格式 如 下 所 示 。 


globalCompositeOperation = type 


上 述 语 句 表示 设置 不 同形 状 的 组 合 类 型 。 其 中 ，type 表示 方 的 图 形 是 已 经 存在 的 canvas 
内 容 、 圆 的 图 形 是 新 的 形状 ， 其 默认 值 为 source-over， 表 示 在 canvas 内 容 上 面 画 新 的 形状 。 
属性 值 ype 具有 12 个 含义 ， 其 具体 含义 如 表 16-6 所 示 。 


表 16-6 属性 值 type 的 含义 


这 是 默认 设置 ， 新 图 形 会 覆盖 在 原 有 内 容 之 上 

会 在 原 有 内 容 之 下 绘制 新 图 形 

新 图 形 会 仅仅 出 现 与 原 有 内 容重 登 的 部 分 ， 其 他 区 域 都 变 成 透明 的 
原 有 内 容 中 与 新 图 形 重 芝 的 部 分 会 被 保留 ， 其 他 区 域 都 变 成 透明 的 
| source-out 。 | 结果 是 只 有 新 图 形 中 与 原 有 内 容 不 重 和 的 者 分 会 被 绘制 出 来 

原 有 内 容 中 与 新 图 形 不 重 蕉 的 部 分 会 被 保留 

新 图 形 中 与 原 有 内 容重 车 的 部 分 会 被 绘制 ， 并 著 盖 于 原 有 内 容 之 上 
原 有 内 容 中 与 新 内 容重 荐 的 部 分 会 被 保留 ， 并 会 在 原 有 内 容 之 下 绘制 新 图 形 
lighter 对 两 个 图 形 中 重 受 的 部 分 做 加 色 处 理 

darker 对 两 个 图 形 中 重 受 的 部 分 做 减 色 处 理 

a 重 又 的 部 分 会 变 成 透明 

只 有 新 图 形 会 被 保留 ， 其 他 都 被 清除 掉 


【 例 16.10】〔 实 例文 件 ， ch16\16.10.html) 
<!DOCTYPE html> 

<html> 

<head> 

<title> 绘 制图 形 组 合 </title> 

<script> 

function draw(id) 
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{ 
Var canvas=document .getElementById(id); 
if(canvas==null) 
return false; 
Var context=canvas.getContext ('2d"'); 
Var oprtns=new Rrray( 
"source-atop", 
"source-in", 
"source-out", 
"source-over", 
"destination-atop", 
"destination-in", 
"destination-out", 
"destination-over", 
"lighter", 
"copy", 
OT 
); 
var i=10; 
context.fillstyle="blue"; 
context .fillRect (10,10,60,60); 
context .globalCompositeOperation=oprtns[i]; 
context .beginPath (); 
context .fillstyle="red"; 
context.arc(60,60,30,0,Math.PI*2, false); 
context .fi1]1 (); 
} 
</script> 
</head> 
<body onload="draw ('canvas');"> 
<h1> 图 形 组 合 </h1> 
<canvas id="canvas" width="400" height="300" /> 
</body> 
</html> 


在 上 面 的 代码 中 ， 首 先 创建 了 一 个 oprtns 数组 ， 用 于 存储 type 的 12 个 值 ， 然 后 绘制 了 一 
个 矩形 ， 并 使 用 content 上 下 文 对 象 设置 了 图 形 的 组 合 方式 ， 即 采用 新 图 形 显示 其 他 被 清除 的 
方式 ， 最 后 使 用 arc 绘制 了 一 个 圆 。 

在 正 11.0 中 的 浏览 效果 如 图 16-10 所 示 ， 在 显示 页 面 上 绘制 了 一 个 矩形 和 圆 ， 但 矩形 和 
圆 接触 的 地 方 以 空白 显示 。 
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图 16-10 图 形 组 合 


16.6 绘制 带 阴影 的 图 形 


在 画布 canvas 上 绘制 带 有 阴影 效果 的 图 形 非常 简单 , 只 需要 设置 几 个 属性 即 可 。 这 几 个 属 
性 分 别 为 shadowOffsetX、shadowOffsetY、shadowBlur 和 shadowColor。 其 中 , 属性 shadowColor 
表示 阴影 颜色 ， 其 值 和 CSS 颜色 值 一 致 ， shadowBlur 表示 设置 阴影 模糊 程度 ， 此 值 越 大 ， 阴 
影 越 模糊 ，shadowOffsetX 和 shadowOffsetY 属性 表示 阴影 的 x 和 y 偏 移 量 ， 单 位 是 像素 。 


【 例 16.11】〔 实 例文 件 ， ch16\16.11.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 绘 制 阴影 效果 图 形 </title> 
</head> 
<body> 
<canvas id="my canvas" width="200" height="200" style="border:1lpx 
solid #ff0000"></canvas> 
<script type="text/javascript"> 
Var elem = document .getElementById("my canvas"); 
if (elem && elem.getContext) { 
Var context = elem.getContext ("2d"); 
//shadowOoffsetX 和 shadowOffsetY: 阴影 的 x 和 y 偏 移 量 , 单位 是 像素 。 
context .shadowOffsetX = 15; 
context .shadowOffsetY = 15; 
/*hadowBlur: 设置 阴影 模糊 程度 。 此 值 越 大 , 阴影 越 模糊 ,其 效果 和 Photoshop 
的 高 斯 模糊 滤 镜 相同 。*/ 


context.shadowBlur = 10; 
//shadowColor: 阴影 颜色 。 其 值 和 css 颜色 值 一 致 。 
/*context.shadowColor = "rgba(255，0，0，0.5)"; 或 下 面 的 十 六 
进 制 的 表示 方法 */ 
Context .shadowColor = '#f00°"'; 
context.fillstyle = "#00f"'; 
context .fillRect (20, 20, 150, 100); 
} 
</script> 
</body> 
</html> 
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在 正 11.0 中 的 浏览 效果 如 图 16-11 所 示 ， 在 页 面 上 显示 了 一 个 蓝 色 箱 形 ， 其 阴影 为 红色 算 形 。 


= 口 x 
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图 16-11 带 有 阴影 的 图 形 


16.7 ”使 用 图 像 


画布 canvas 有 一 项 可 以 引入 图 像 的 功能 , 可 以 用 于 图 片 合成 或 者 制作 背景 等 , 目前 却 仅 可 
以 在 图 像 中 加 入 文字 。 只 要 是 Geck 支持 的 图 像 (如 PNG, GIF, JPEG 等 ) 都 可 以 引入 到 canvas 
中 ， 而 且 其 他 的 canvas 元 素 也 可 以 作为 图 像 的 来 源 。 


16.7.1 绘制 图 像 

要 在 画布 canvas 上 绘制 图 像 , 需要 先 有 一 个 图 片 。 这 个 图 片 可 以 是 已 经 存在 的 <img> 元 素 ， 
或 者 通过 JS 创建 。 无 论 采用 哪 种 方式 ， 都 需要 在 绘制 canvas 之 前 完全 加 载 这 张 图 片 。 浏 览 器 
通常 会 在 页 面 脚本 执行 的 同时 异步 加 载 图 片 。 如 果 试 图 在 图 片 未 完全 加 载 之 前 就 将 其 呈现 到 
canvas 上 ， 那 么 canvas 将 不 会 显示 任何 图 片 。 

捕获 和 绘制 图 形 完全 是 通过 drawImage 函数 完成 的 ， 它 可 以 接受 不 同 的 HIML 参数 ， 具 
体 含义 如 表 16-7 所 示 。 


表 16-7 drawlmage 函数 


函数 说 明 


drawIamge(image,dx,dy) 接受 一 个 图 片 ， 并 将 之 画 到 canvas 中 。 给 出 的 坐标 (dx,dy) 代表 图 
片 的 左上 角 。 例 如 ， 坐 标 〈0，0) 将 把 图 片 画 到 canvas 的 左上 角 。 

drawIamge(image,dx,dy,dw,dh) 接受 一 个 图 片 , 将 其 缩放 为 宽度 为 dw、 高 度 为 dh, 然后 画 到 canvas 
上 的 (dx,dy) 位 置 

drawIamge(image,sx,sy,sw,sh, 接受 一 个 图 片 ， 通 过 参数 (sx,sy,sw,sh) 指定 图 片 裁剪 的 范围 ， 缩 放 

dx,dy,dw,dh) 到 (dw,dh) 的 大 小 ， 最 后 把 它 画 到 canvas 上 的 (dx,dy) 位 置 
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【 例 16.12】〔 实 例文 件 : ch16\16.12.html) 


<!DOCTYPE html> 
<html> 
<head><title> 绘 制图 像 </title></head> 
<body> 
<canvas id="canvas" width="300" height="200" style="border:1px solid blue"> 
Your browser does not support the canvas element. 
</canvas> 
<script type="text/javascript"> 
window.onload=function(){ 
Var ctx=document .getElementById ("canvas") .getContext ("2d"); 
Var img=new Image(); 
img.src="01.jpg"; 
img.onload=function(){ 
ctx.drawImage (img, 0,0); 
} 
} 
</script> 
</body> 
</html> 


在 上 面 的 代码 中 ,使 用 窗口 的 onload 加 载 事 件 ， 即 页 面 被 加 载 时 执行 函数 。 在 函数 中 创建 
上 下 文 对 象 ctx， 并 创建 Image 对 象 mg; 然后 使 用 img 对 象 的 属性 src 设置 图 片 来 源 ， 最 后 使 
用 drawImage 画 出 当前 的 图 像 。 

在 正 11.0 中 的 浏览 效果 如 图 16-12 所 示 ， 在 页 面 上 绘制 了 一 个 图 像 并 在 画布 中 显示 。 
le massive -6 i 
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图 16-12 绘制 图 像 


16.7.2 图像 平 铺 


使 用 画布 canvas 绘制 图 像 有 很 多 种 用 处 ,其 中 一 个 用 处 就 是 将 绘制 的 图 像 作 为 背景 图 片 使 
用 。 在 做 背景 图 片 时 , 如 果 显 示 图 片 的 区 域 大 小 不 能 直接 设 定 , 通常 将 图 片 以 平 铺 的 方式 显示 。 
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HTML5 Canvas API 支持 图 片 平 铺 ， 此 时 需要 调用 createPattern 函数 ， 即 调用 createPattern 
函数 来 替代 之 前 的 drawImage 函数 。 函 数 createPattern 的 语法 格式 如 下 所 示 。 


createPattern (image, type) 
其 中 ，image 表示 要 绘制 的 图 像 ，type 表示 平 铺 的 类 型 (如 表 16-8 所 示 ) 。 
表 16-8 平 铺 类 型 


no-repeat 不 平 铺 
repeat-x 横 方向 平 铺 


repeat-y 纵 方 向 平 铺 


【 例 16.13】〔 实 例文 件 ， ch16\16.13.html) 


<!DOCTYPE html> 


<html> 

<head> 

<tit1le> 绘 制图 像 平 铺 </title> 

</head> 

<body onload="draw('canvas');"> 

<h1> 图 形 平 铺 </h1> 

<canvas id="canvas" width="400" height="300"></canvas> 
<script> 


function draw(id){ 
var canvas=document .getElementById (id); 
if(canvas==null){ 
return false; 
} 
Var context=canvas.getContext ('2d'); 
context .fillstyle="#eeeeff"; 
context.fillRect (0,0,400,300); 
image=new Image(); 
image.src="01.jpg"; 
image.onload=function(){ 
Var ptrn=context .createPattern (image, 'repeat'); 
context .fillstyle=ptrn; 
context .fillRect (0,0,400,300); 


} 
/merint> 
</body> 
</html> 
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在 上 面 的 代码 中 ， 首 先 使 用 fillRect 创建 了 一 个 宽度 为 400、 高 度 为 300、 左 上 角 坐 标 位 置 
为 (0, 0) 的 矩形 ,然后 创建 了 一 个 Image 对 象 , 用 src 连接 一 个 图 像 源 , 然后 使 用 createPattern 
绘制 一 个 图 像 ， 方 式 是 完全 平 铺 ， 并 将 这 个 图 像 作为 一 个 模式 填充 到 矩形 中 ， 最 后 绘制 这 个 矩 
形 ， 大 小 完全 覆盖 原来 的 图 形 。 

在 正 11.0 中 的 浏览 效果 如 图 16-13 所 示 ， 在 页 面 上 绘制 了 一 个 图 像 ， 其 图 像 以 平 铺 的 方 
式 充满 整个 矩形 。 
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图 16-13 ”图像 平 铺 


16.7.3 ”图 像 栽 剪 

在 处 理 图 像 时 经 常会 遇 到 裁剪 这 种 需求 ， 即 在 画布 上 裁剪 出 一 块 区 域 ， 这 块 区 域 是 在 裁剪 
动作 clip 之 前 由 绘图 路 径 设 定 的 ， 可 以 是 方形 、 圆 形 、 星 形 和 其 他 任何 可 以 绘制 的 轮廓 形状 。 
裁剪 路 径 其 实 就 是 绘图 路 径 ， 只 不 过 这 个 路 径 不 是 拿 来 绘图 的 ， 而 是 设 定 显示 区 域 和 遮挡 区 域 
的 一 个 分 界线 。 

完成 对 图 像 的 裁 前 ， 可 能 要 用 到 clip 函数 。clip 函数 表示 给 canvas 设置 一 个 剪辑 区 域 ， 在 
调用 clip 函数 之 后 的 代码 只 对 这 个 设 定 的 剪辑 区 域 有 效 ， 不 会 影响 其 他 地 方 ， 这 个 函数 在 进行 
局 部 更 新 时 很 有 用 。 默 认 情况 下 ， 剪 辑 区 域 是 一 个 左上 角 在 (0, 0)、 宽 和 高 分 别 等 于 canvas 元 
素 的 宽 和 高 的 矩形 。 


【 例 16.14】 “实例 文件 : ch16\16.14.html) 


<!DOCTYPE html> 
< html> 


"362。 
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<head> 
<title> 绘 制图 像 裁 前 </title> 
<script type="text/javascript" src="script.js"></script> 
</head> 
<body onload="draw('canvas');"> 
<h1> 图 像 裁剪 实例 </h1> 
<canvas id="canvas" width="400"” height="300"></canvas> 
<script> 
function draw(id){ 
Var canvas=document .getElementById (id); 
if(canvas==null){ 
return false; 
1 
Var context=canvas.getContext ('2d'); 
Var gr=context.createLinearGradient (0, 400, 300,0); 
gr.addColorstop(0, 'rgb(255,255,0)"'); 
gr.addColorstop(1,'rgb(0,255,255)"'); 
context .fillstyle=gr; 
context .fillRect (0,0,400,300); 
image=new Image(); 
image.onload=function(){ 
drawImg (context, image); 
] 7 
image.src="01.jpg"; 
function drawImg (context, image) { 
create8StarClip (context); 
context .drawImage (image, -50,-150, 300, 300); 
1 
function create8StarClip (Context) 1{ 
Var n=0; 
Var dx=100; 
Var dy=0; 
Var s=150; 
context.beginPath () 7 
Context .translate(100,150) 7 
Var x=Math.sin(0); 
Var y=Math.cos (0); 
Var dig=Math.PI/5*4; 
for (Var i=0;i<8;i++){ 
Var x=Math.sin(i*dig); 
Var y=Math.cos (i*dig); 
context .lineTo (dx+x*s, dy+y*Ss); 
} 
context .clip(); 
} 
</script> 
</body> 
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</html> 


在 上 面 的 代码 中 ,创建 了 三 个 JavaScript 函数 。 其 中 ，create8StarClip 函数 完成 多 边 图 形 的 
创建 ， 并 以 此 图 形 作为 裁剪 的 依据 ;drawImsg 函数 表示 绘制 一 个 图 形 ， 其 图 形 带 有 裁剪 区 域 ; 
draw 函数 完成 对 画布 对 象 的 获取 ， 并 定义 一 个 线性 渐变 ， 然 后 创建 一 个 Image 对 象 。 

在 正 11.0 中 的 浏览 效果 如 图 16-14 所 示 ， 在 显示 页 面 上 绘制 一 个 五 边 形 ， 并 将 图 像 作为 
五 边 形 的 背景 ， 从 而 实现 对 象 图 像 的 裁剪。 


< 万- 1 
Sn 3 

文 伯 朋 ”桐生 加“ 亚 看 M]) 收 天 去 (A) 工具 (T) 蕉 共 (H) 
部 5 下, foo 


图 像 裁剪 实例 


图 16-14 图 像 裁剪 


16.7.4 ”像素 处 理 


在 电脑 屏幕 上 可 以 看 到 色彩 斑 漳 的 图 像 ， 其实 这 些 图 像 都 是 由 一 个 个 像素 点 组 成 的 。 一 个 
像素 对 应 着 内 存 中 一 组 连续 的 二 进 制 位 , 由 于 是 二 进 制 位 , 因此 每 位 上 的 取 值 只 能 是 0 或 者 1。 
这 组 连续 的 二 进 制 位 可 以 由 0 和 1 排列 组 合 出 很 多 种 情况 , 每 一 种 排列 组 合 就 决定 了 这 个 像素 
的 一 种 颜色 。 通 常 ， 每 个 像素 点 由 四 个 字 节 组 成 。 

这 四 个 字 节 代表 的 含义 分 别 是 ,第 一 个 字 节 决定 像素 的 红色 值 ; 第 二 个 字 节 决定 像素 的 绿 
色 值 ， 第 三 个 字 节 决定 像素 的 蓝 色 值 ， 第 四 个 字 节 决定 像素 的 透明 度 值 。 

在 画布 中 ， 可 以 使 用 ImageData 对 象 来 保存 图 像 像素 值 ， 有 width、height 和 data 三 个 属 
性 。 其 中 ，data 属性 就 是 一 个 连续 数组 ， 保 存 着 图 像 的 所 有 像素 值 。 

data 属性 保存 像素 值 的 方法 如 下 : 

imageData-data[index*4 +0] 

imageData.data[index*4 +1] 


imageData.data[index*4 +2] 
imageData.data[index*4 +3] 


HTML5 绘制 图 形 第 16 章 


上 面 取出 了 data 数组 中 连续 相 邻 的 四 个 值 ， 这 四 个 值 分 别 代表 图 像 中 第 index+1 个 像素 的 
红色 、 绿 色 、 蓝 色 和 透明 度 值 的 大 小 。 需 要 注意 的 是 ，index 从 0 开始 ， 图 像 中 总 共有 width x 
height 个 像素 ， 数 组 中 总 共 保 存 widthXheightX4 个 数值 。 

画布 对 象 有 三 个 函数 用 来 创建 、 读 取 和 设置 ImageData 对 象 ， 如 表 16-9 所 示 。 


表 16-9 画布 对 象 函数 


createImageData(width, height) 在 内 存 中 创建 一 个 指定 大 小 的 ImageData 对 象 〈 像 素数 组 ) ， 对 象 
中 的 像素 点 都 是 黑色 透明 的 ， 即 rgba(0,0,0,0) 


getImageData(x, y, width, height) | 返回 一 个 ImageData 对 象 ， 这 个 ImageData 对 象 中 包含 指定 
像素 数组 
putImageData(data, x, y) 将 ImageData 对 象 绘制 到 屏幕 的 指定 


【 例 16.15】 (实例 文件 : ch16\16.15.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 图 像 像素 处 理 </title> 


<script type="text/javascript" src="script.js"></script> 


</head> 

<body onload="draw('canvas');"> 

<h1> 像 素 处 理 示 例 </h1> 

<canvas id="canvas" width="400" height="300"></canvas> 
<script> 


function draw(id){ 
Var canvas=document .getElementById (id); 
if(canvas==null){ 
return false; 
3» 
Var context=canvas.getContext ('2d'); 
image=new Image(); 
image.src="01.jpg"; 
image.onload=function(){ 
context .drawImage (image, 0,0); 
var 
imagedata=context .getImageData (0,0,image.width,image.height); 
for (var i=0,n=imagedata.data.length;i<n;i+=4){ 
imagedata.data[i+0]=255-imagedata.data[i+0]; 
imagedata.data[i+1]=255-imagedata.data[i+2]; 
imagedata.data[i+2]=255-imagedata.datal[i+1]; 


) 
context .putImageData (imagedata, 0,0); 


}; 
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} 

/seript> 

</body> 

</html> 

在 上 面 的 代码 中 ,使 用 getImageData 函数 获取 一 个 ImageData 对 象 并 包含 相关 的 像素 数组 ， 
在 for 循环 中 对 像素 值 重新 赋值 ， 最 后 使 用 putImageData 将 处 理 过 的 图 像 在 画布 上 绘制 出 来 。 

在 下 11.0 中 的 浏览 效果 如 图 16-15 所 示 ， 在 页 面 上 显示 了 一 个 图 像 ， 明 显 是 经 过 像素 处 
理 的 ， 没 有 原来 的 清晰 。 


二 口 x 
名 “DA\ 让 书 剧 K 双 vode 呈 图- 吕 || 妆 家- 
局 图 从 像素 外 理 
文件 (有 奖 蜗 (日 再 看 (V) 收 之 夫 (A) 工具 (D 帮助 (H) 
遍 和 EE 下 , fr 


像素 处 理 示 例 a 


图 16-15 ”像素 处 理 


16.8 绘制 文字 


在 画布 中 绘制 字符 串 〈 文 字 ) 的 方式 与 操作 其 他 路 径 对 象 的 方式 相同 ， 既 可 以 描绘 文本 轮 
廓 和 填充 文本 内 部 ， 同 时 又 能 将 所 有 能 够 应 用 于 其 他 图 形 的 变换 和 样式 都 应 用 于 文本 。 
文本 绘制 功能 的 常用 函数 如 表 16-10 所 示 。 


表 16-10 文本 绘制 函数 


函数 说 明 


fillText(text,x,y,maxwidth) 绘制 带 fillStyle 填充 的 文字 、 文本 参数 以 及 用 于 指定 文本 位 置 的 坐标 参 
数 。maxwidth 是 可 选 参数 ， 用 于 限制 字体 大 小 ， 会 将 文本 字体 强制 收 


缩 到 指定 尺寸 
trokeText(text,x,y,maxwidth) | 绘制 只 有 strokeStyle 边框 的 文字 ， 其 参数 含义 和 上 一 个 方法 相同 
measureText 该 函数 会 返回 一 个 度量 对 象 ， 其 包含 了 在 当前 context 环境 下 指定 文本 
的 实际 显示 宽度 


为 了 保证 文本 在 各 浏览 器 下 都 能 正常 显示 ， 在 绘制 上 下 文 里 有 以 下 字体 属性 。 
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font 可 以 是 CSS 字体 规则 中 的 任何 值 ， 包 括 字体 样式 、 字 体 变种 、 字 体 大 小 与 粗细 、 行 高 
和 字体 名 称 。 


textAlign 控制 文本 的 对 齐 方式 ， 类似 于 (但 不 完全 相同 〉》CSS 中 的 textralign， 可 能 的 取 值 
为 start、end、left、right 和 center。 


textBaseline 控制 文本 相对 于 起 点 的 位 置 ， 可 能 的 取 值 有 top、hanging、middle、alphabetic、 


ideographic 和 bottom。 对 于 简单 的 英文 字母 ， 可 以 放心 地 使 用 top、middle 或 bottom 作为 其 文 
本 基线 。 


【 例 16.16】 《实例 文件 ，ch16\16.16.html) 
<!DOCTYPE html> 
<html> 
<head> 
<title>Canvas</title> 
</head> 
<body> 


<canvas id="my canvas" width="200" height="200" style="border:1px 
solid #ff0000"></canvas> 


<script type="text/javascript"> 
Var elem = document .getElementById("my canvas"); 
if (elem && elem.getContext) { 
Var context = elem.getContext ("2d"); 
context.fillstyle = "#00f"; 
//font: 文字 字体 ， 同 CSSfont-family 属性 


context.font = 'italic 30px 微软 雅 黑 ';// 和 斜体 30 像 素 微软 雅 黑 字体 

/*textAlign: 文字 水 平 对 齐 方式 。 可 取 属 性 值 : start, end, left,right, 
center。 默 认 值 :start。*/ 

context .textAlign = 'left'; 

/* 文 字 竖 直 对 齐 方 式 。 可 取 属 性 值 : top，hanging, middle,alphabetic, 
ideographic，bottom。 默 认 值 : alphabetic*/ 

Context .textBaseline = 'top'; 


/* 要 输出 的 文字 内 容 、 文 字 位 置 坐标 ， 第 四 个 参数 为 可 选 选项 一 最 大 宽度 。 如 果 
需要 的 话 ， 浏 览 器 会 缩减 文字 以 让 它 适 应 指定 宽度 */ 


context.fillText  (' 祖 国生 日 快乐 !'，0，0,50) ; 
Context . font = 


// 有 填充 
'bold 30px sans-serif'; 


context .strokeText ('" 祖 国生 日 快乐 !"，0，50,100) ; 
} 


</script> 
</body> 
</html> 


// 只 有 文字 边框 


在 正 11.0 中 的 浏览 效果 如 图 16-16 所 示 , 在 页 面 上 显示 一 个 画布 边框 , 画布 中 显示 两 个 不 
同 的 字符 串 ， 第 一 个 字符 串 以 斜体 显示 ， 其 颜色 为 蓝 色 ; 第 二 个 字符 串 字体 颜色 为 浅 黑色 ， 加 


粗 显示 。 
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sa 芒 x 
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总 Canvas x | 

文件 (F) 编辑 (6 查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 
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图 16-16 绘制 文字 


16.9 图 形 的 保存 与 恢复 


在 用 画布 对 象 绘制 图 形 或 图 像 时 ， 可 以 对 这 些 图 形 或 者 图 形 的 状态 进行 改变 ， 即 永久 保存 
图 形 或 图 像 。 


16.9.1 保存 与 恢复 状态 


在 画布 对 象 中 , 由 两 个 函数 管理 绘制 状态 的 当前 栈 : save 函数 把 当前 状态 压 入 栈 中 , restore 
函数 从 栈 顶 弹出 状态 。 绘 制 状态 不 会 覆盖 对 画布 所 做 的 每 件 事情 。 其 中 ，save 函数 用 来 保存 
canvas 的 状态 。save 之 后 ， 可 以 调用 Canvas 的 平移 、 放 缩 、 旋 转 、 错 切 、 裁 前 等 操作 。restore 
函数 用 来 恢复 Canvas 之 前 保存 的 状态 .防止 save 后 对 Canvas 执行 的 操作 对 后 续 的 绘制 有 影响 。 
save 和 restore 要 配对 使 用 (restore 可 以 比 save 少 ， 但 不 能 多 ) ， 如 果 restore 调用 次 数 比 save 
多 ， 就 会 引发 Error。 


【 例 16.17】 《实例 文件 : ch16\16.17.html) 


<!DOCTYPE html> 

<html> 

<head><title> 保 存 与 恢复 </title></head> 

<body> 

<canvas id="myCanvas" width="500" height="400" style="border:lpx solid 
blue"> 

Your browser does not support the canvas element. 

</canvas> 

<script type="text/javascript"> 

Var c=document .getElementById("myCanvas"); 

Var ctx=c.getContext ("2d"); 

ctx: filIStIle = "qb(0 02355 

ctx.save(); 
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ctx.fillRect (50,50,100,100); 
ctx.fillstyle = "rgb(255,0,0)"; 
ctx.save () 
ctx.fillRect (200, 50,100,100); 
ctx.restore() 

ctx.fillRect (350, 50,100,100); 
ctx.restore(); 

ctx.fillRect (50, 200, 100, 100); 
</Seript> 

</body> 

</html> 


在 上 面 的 代码 中 ， 绘 制 了 四 个 和 矩形。 在 第 一 个 绘制 之 前 ， 定 义 当 前 矩形 的 显示 颜色 ， 并 将 
此 样式 加 入 到 栈 中 ， 然 后 创建 一 个 矩形 。 在 第 二 个 矩形 绘制 之 前 ， 重 新 定义 了 和 拖 形 显示 颜色 ， 
并 使 用 save 将 此 样式 压 入 栈 中 ， 然 后 创建 一 个 和 矩形。 在 第 三 个 矩形 绘制 之 前 ， 使 用 restore 恢 
复 当 前 显示 颜色 ， 即 调用 栈 中 的 最 上 层 颜 色 ， 再 绘制 矩形 。 在 第 四 个 年 形 绘制 之 前 ， 继 续 使 用 
restore 函数 ， 调 用 最 后 一 个 栈 中 元 素 定义 矩形 颜色 。 
在 正 11.0 中 的 浏览 效果 如 图 16-17 所 示 ， 在 页 面 上 绘制 四 个 矩形 ， 第 一 个 和 第 四 个 矩形 
显示 为 蓝 色 ， 第 二 个 和 第 三 个 矩形 显示 为 红色 。 
| RE lb Pp- @ 
| Rem y 


文 f#( 由 再 硬 NV) 9 至 (A) 工 (T) 帮助 (H) 
将 95R_ 下 , ro 


图 16-17 恢复 和 保存 


16.9.2 ”保存 文件 

当 绘制 出 漂亮 的 图 形 后 需要 保存 这 些 劳动 成 果 ， 这 时 可 以 将 画布 元 素 〈 而 不 是 2D 环境 ) 
的 当前 状态 导出 到 数据 URL。 导 出 很 简单 ， 可 以 利用 toDataURL 函数 完成 。 它 可 以 以 不 同 的 
图 片 格式 来 调用 。 目 前 ，png 格式 是 规范 定义 的 格式 。 通 常 ， 浏 览 器 也 支持 其 他 的 格式 。 

目前 Firefox 和 Opera 浏览 器 只 支持 png 格式 ，Safari 支持 gif、png 和 jpg 格式。 大 多 数 浏 
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览 器 支持 读 取 base64 编码 内 容 。URL 的 格式 如 下 : 
data:image/png;base64, iVBORWwOKGgOAAAANSUNEUgAAAfQAAAHOCAYAAADL1t 


以 一 个 data 开始 ， 然 后 是 mine 类 型 ， 之 后 是 编码 和 base64， 最 后 是 原始 数据 。 这 些 原始 
数据 就 是 画布 元 素 所 要 导出 的 内 容 ， 并 且 浏 览 器 能 够 将 数据 编码 为 真正 的 资源 。 


【 例 16.18】 “实例 文件 : ch16\16.18.html) 


<!DOCTYPE html> 

<html> 

<body> 

<canvas id="myCanvas" width="500" height="500" style="border:lpx solid 
blue"> 

Your browser does not support the canvas element. 

</canvas> 

<script type="text/javascript"> 

Var c=document .getElementById ("myCanvas"); 

Var cxt=c.getContext ("2d"); 

cxt.fillstyle='rgb(0,0,255)"'; 

cxt .fillRect (0,0,cxt.canvas.width,cxt.canvas.height); 

cxts flllStyLle="rgb(0,25570)™s 

cxt.fillRect (10,20,50,50); 

window.location=cxt.canvas.toDataURL (image/png'); 

</script> 

</body> 

</html> 


在 上 面 的 代码 中 ， 使 用 canvas.toDataURL 语句 将 当前 绘制 图 像 保存 到 URL 数据 中 。 在 
Firefox 62.0 中 的 浏览 效果 如 图 16-18 所 示 ， 在 页 面 中 无 任何 数据 显示 ， 并 且 提 示 无 法 显示 该 页 
的 是 鼠标 指向 的 位 置 ， 即 地 址 栏 中 的 URL 数据 。 


纪 红 (者 (V) 历 定 (5) 书 符 (B) 工 呈 中 项 助 (H) 


面 。 此 时 需要 注 


图 16-18 保存 图 形 


HTML5 绘制 图 形 第 16 齐 


16.10 “综合 实例 1 一 一 绘制 商标 


绘制 商标 是 canvas 画布 的 用 途 之 一 。 这 里 将 绘制 类 似 nike 的 商标 。nike 的 图 标 比 adidas 
的 复杂 得 多 ，adidas 都 是 由 直线 组 成 的 ，nike 的 多 了 曲线 。 实 现 本 实例 的 步骤 如 下 : 


(0 国 分 析 示 求 


绘制 两 条 曲线 , 首先 需要 找到 曲线 的 参考 点 (参考 点 决定 了 曲线 的 曲率 ) ， 要 慢 慢 地 移动 ， 
然后 看 效果 ， 反复 操作 。quadraticCurveTo(30,79,99,78) 函 数 有 两 组 坐标 : 第 一 组 坐标 为 控制 点 ， 
决定 曲线 的 曲率 ; 第 二 组 坐标 为 终点 。 


i@g 构建 HTML， 实 现 canvas 画布 


<!DOCTYPE html> 

<html> 

<head> 

<title> 绘 制 商标 </title> 

</head> 

<body> 

<canvas id="adidas" width="375px" height="132px" style="border:lpx solid 
#000;"></canvas> 

</body> 

</html> 


在 下 11.0 中 的 浏览 效果 如 图 16-19 所 示 ， 此 时 只 显示 一 个 画布 边框 ， 其 内 容 还 没有 绘制 。 


= “个 13 
| 乱 DA\ 本 书 源 代码 \code 泊 鲁 ”他 | 搜索- 
号 给 制 商 款 x 加 
| 文件 (F) 编辑 (日 。 查 看 V) 收藏 (A) 工具 (1) 帮助 (H) 
请 EE 下 , 你 0 道 


图 16-19 定义 画布 边框 
ti9gj JS 实现 基本 图 形 


<script> 
function drawAdidas(){ 


// 取 得 canvas 元 素 及 其 绘图 上 下 文 
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Var canvas=document .getElementById('adidas'); 
Var context=canvas.getContext ('2d"'); 
// 保 存 当 前 绘图 状态 
context .save(); 
// 开 始 绘制 打 勾 的 轮廓 
context .beginPath () 7 
Context .moveTo (53,0) 7 
// 绘 制 上 半 部 分 曲线 ， 第 一 组 坐标 为 控制 点 ， 决 定 曲线 的 曲率 ， 第 二 组 坐标 为 终点 
context .quadraticCurveTo (30,79,99,78); 
context.lineTo (371,2); 
context.lineTo(74,134); 
context .quadraticCurveTo(-55,124,53,0); 
// 用 红色 填充 
context .fillSstyle="#da251lc"; 
context .fil11(); 
// 用 3 像素 深 红线 条 描 边 
context .lineWidth=3; 
// 连 接 处 平滑 
context .lineJoin='round'; 
context .strokestyle="#d40000"; 
context .stroke () 7 
// 恢 复原 有 绘图 状态 
context.restore(); 
} 
window.addEventListener ("load",drawAdidas, true); 
</script> 


在 下 11.0 中 的 浏览 效果 如 图 16-20 所 示 ， 页 面 中 显示 一 个 商标 图 案 ， 颜色 为 红色 。 


bn 口 x 
| 名“D:\ 本 书 源 代码 code\i 国 -他 搜索- 
| 从 币 击 标 x 加 
文件 (F) 编辑 (E) 查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 
守 各 百度 一 下 ， 你 就 部 诈 


图 16-20 绘制 商标 


16.11 综合 实例 2 一 一 绘制 火柴 棒 人 物 


漫画 中 最 常见 的 一 种 图 形 就 是 火柴 棒 人 , 通过 简单 的 几 个 笔画 就 可 以 绘制 一 个 传神 的 动漫 
人 物 。 使 用 canvas 和 JavaScript 同样 可 以 绘制 一 个 火柴 棒 人 物 ， 有 具体 步骤 如 下 : 


HTML5 绘制 图 形 
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一 个 火柴 棒 人 由 一 个 脸 部 和 一 个 身躯 组 成 。 脸 部 是 一 个 圆 形 ， 其 中 包括 眼睛 和 嘴 ; 身躯 由 


几 条 直线 组 成 ， 包 括 手 和 腿 等 。 实 际 上 此 案例 就 是 绘制 圆 形 、 弧 度 和 直线 的 组 合 。 


上 罗 22 实现 HTML 页 面 ， 定 义 画 布 canvas 


<!DOCTYPE html> 
<html1> 
<title> 绘 制 火柴 棒 人 </title> 
<body> 


<canvas id="myCanvas" width="500" height="300" style="border:lpx solid 


blue"> 


Your browser does not support the canvas element. 


</canvas> 
</body> 
</html> 


在 下 11.0 中 的 浏览 效果 如 图 16-21 所 示 ， 页 面 中 显示 了 一 个 画布 边框。 


面 cWarwodminaonpeaaop 克 用 -5| EB ee 人 
RN WO) SEV CR IAT Veo 


9 


x 


图 16-21 定义 画布 边框 
t@ 旨 实现 头 部 轮 廊 绘 制 


<script type="text/javascript"> 

Var c=document .getElementById ("myCanvas"); 
Var cxt=c.getContext ("2d"); 

cxt .beginPath (); 
cxt.arc(100,50,30,0,Math.PI*2,true); 

CRE LLL 

</script> 


这 会 产生 一 个 实心 的 、 填 充 的 头 部 ， 即 圆 形 。 在 arc 函数 中 , x 和 y 的 坐标 为 100，50) ， 
半径 为 30px， 后 面 两 个 参数 为 弧度 的 开始 和 结束 ， 第 6 个 参数 表示 绘制 弧 形 的 方向 , 即 顺 时 针 
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/ 逆 时 针 方向 。 
在 正 11.0 中 的 浏览 效果 如 图 16-22 所 示 ， 页 面 中 显示 了 一 个 实心 圆 ， 其 颜色 为 黑色 。 
人 CusereedminshorDesiaopV 站- © | Bk 人 下 © 
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图 16-22 绘制 头 部 轮廓 
i 风 用 JS 绘制 笑脸 


cxt .beginPath () 7 
cxt.strokestyle='#c00'; 
cxt.lineWidth=3; 
cxt.arc(100,50,20,0,Math.PI, false); 
cxt.stroke(); 


此 处 使 用 beginPath 方法 表示 重新 绘制 ， 并 设 定 线条 宽度 ， 然 后 绘制 一 个 弧 形 ( 是 从 嘴 部 
开始 的 ) 。 
在 下 11.0 中 的 浏览 效果 如 图 16-23 所 示 ， 页 面 中 显示 了 一 个 漂亮 的 半圆 式 的 笑脸 。 


a x 
cheerisdminw on Dritop lk P ~ © | EB aK 人 © 
XN SRH SH exN IRM Wem 


图 16-23 ”绘制 笑脸 
L@ 园 用 JS 绘制 眼睛 


cxt .beginPath (); 
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CXt .fillstyle="#c00"; 
cxt.arc(90,45,3,0,Math.PI*2,true); 
EE 下 

cxt .moveTo (113, 45); 

cxt arc(liLl0 A4537r0.Maths Plt2 tr 
ext ELLL(s 

cxt.stroke () 7 


首先 填充 弧 线 ， 创 建 一 个 实体 样式 的 眼睛 (首先 用 arc 绘制 左 眼 ， 然 后 使 用 moveTo 绘制 
右 眼 ) 。 在 正 11.0 中 的 浏览 效果 如 图 16-24 所 示 ， 页 面 中 显示 了 一 双眼 睛 。 


国 CWUserwdriseonDektopv 用 - 6] 同和 人 © 
HN Wer) EEW was IRT Wo 


图 16-24 绘制 眼睛 
8 绘制 身躯 


cxt .moveTo (100,80) 

cxt.1ineTo(100,150) 
Cxt .moveTo (100,100), 
cxt.lineTo(60,120); 

cxt .moveTo (100,100); 
cxt.lineTo (140,120); 
cxt .moveTo (100,150) > 
cxt.lineTo (80,190); 

cxt .moveTo (100,150) > 
cxt.lineTo (140,190); 
cxt .stroke () 7 


上 面 的 代码 以 moveTo 作为 开始 坐标 、 以 lineTo 为 终点 来 绘制 不 同 的 直线 ， 这 些 直线 的 坐 
标 位 置 需要 在 不 同 地 方 汇集 , 两 只 手 在 坐标 位 置 (100, 100) 交叉 , 两 只 脚 在 坐标 位 置 (100,150) 
交叉 。 

在 正 11.0 中 的 浏览 效果 如 图 16-25 所 示 ， 页 面 中 显示 了 一 个 火柴 棒 人 。 相 较 于 上 一 个 图 
形 ， 多 了 一 个 身躯。 
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图 16-25 ”定义 身躯 


16.12 ”综合 实例 3 一 一 绘制 时 钟 


利用 容器 画布 canvas 这 个 新 的 特性 , 可 以 在 网 页 创建 一 个 类 似 于 钟表 的 特效 。 本 实例 将 创 
建 一 个 时 钟 特效 ， 具 体 步 又 如 下 : 


Lo 分 析 需 求 


在 画布 上 绘制 时 钟 ， 需 要 绘制 几 个 必要 的 图 形 : 表盘 、 时 针 、 分 针 、 秒 针 和 中 心 圆 。 将 上 
面 几 个 图 形 组 合 起 来 就 可 以 构成 一 个 时 针 界 面 ， 然 后 使 用 JS 代码 根据 时 间 确 定 秒针 、 分 针 和 
时 针 的 位 置 。 


t@ 到 创建 HTML 页 面 


<!DOCTYPE html> 

<html> 

<head> 

<tit1le> 制 作 动态 页 面 时 钟 </title> 

</head> 

<body> 

<canvas id="canvas" width="200" height="200" style="border:lpx solid 
#000;"> 您 的 浏览 器 不 支持 canvas。</canvas> 

</body> 

</html> 


上 面 代码 创建 了 一 个 画布 ,其 宽度 为 200 像素 、 高 度 为 200 像素 , 带 有 边框 , 颜色 为 黑色 ， 
样式 为 直线 型 。 在 正 11.0 中 的 浏览 效果 如 图 16-26 所 示 , 页 面 中 显示 了 一 个 带 有 黑色 边框 的 画 
布 ， 画 布 中 没有 任何 信息 。 
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元 色 百 度 - 下 ， 你 50 到 


图 16-26 定义 画布 


i@gj 添加 JavaScript， 绘 制 不 同 图 形 


<script type="text/javascript" language="javascript" 
Var canvas = document .getElementById('canvas'); 
Var ctx = canvas.getContext('2d'); 
F(t) 
var timerId; 
var frameRate = 60; 
function canvobject(){ 


thissz OZ 

this.y = 0; 

this.rotation = 0; 
this.borderWidth = 2; 
this.borderColor = "#000000'; 


this.fill = false; 
this.fillColor = '#ff0000°'; 
this.update = function(){ 


if(!this.ctx)throw new Error(' 您 没有 指定 ctx 对 象 。'); 


var ctx = this.ctx 

ctx.save(); 

ctx.lineWidth = this.borderwidth; 
ctx.strokestyle = this.borderColor; 
ctx.fillstyle = this.fillColor; 
ctx.translate (this.x, this.y); 


charset="utf-8"> 


if(this.rotation)ctx.rotate (this.rotation * Math.PI/180); 


if(this.draw)this.draw (ctx); 
EE et 生 直人 各 本 由 帮 
CtX. Stroke () 7 
ctx> restorel()s 
} 
1; 
function Line(){}; 
Line.prototype = new canvobject(); 
Line.prototype.fill = false; 
Line.prototype.start = [0,0]; 
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Line.prototype.end = [5,5]; 
Line.prototype.draw = function(ctx){ 
ctx.beginPath (); 
ctx.moveTo.apply (ctx, this.start); 
ctx.lineTo.apply (ctx, this.end); 
ctx.closePath (); 

] 7 


function Circle(){}; 

Circle.prototype = new canvobject(); 
Circle.prototype.draw = function(ctx){ 
ctx.beginPath (); 

ctx.arc(0, 0, this.radius, 0, 2 * Math.PI, true); 
ctx.closePath (); 

}; 


Var circle = new Circle(); 
circle.ctx = ctx; 

circle.x = 100; 

circle.y = 100; 

circle.radius = 90; 
circle.fill = true; 
circle.borderWidth = 6; 
circle.fillColor = '#ffffff'; 


Var hour = new Line(); 
hour.ctx ctx; 
hour.x = 100; 
hour.y = 100; 
hour.borderColor 
hour .borderWidth 
hour .rotation = 0; 
hour .start = [0,20]; 
hour .end = [0,-50]; 


"#000000"7 
10; 


Var minute = new Line(); 
minute.ctx = ctx; 

minute.x = 100; 

minute.y = 100; 
minute.borderColor = "#333333"; 
minute.borderWidth = 7; 
minute.rotation = 0; 
minute.start = [0,20]; 
minute.end = [0,-70]; 


Var seconds = new Line(); 


seconds.ctx = ctx; 
seconds.x = 100; 


HTML5 绘制 图 形 
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seconds.y = 100; 
seconds.borderColor = "#ff0000"; 
seconds .borderWidth = 4; 
seconds.rotation = 0; 
seconds.start = [0,20]; 
seconds.end = [0,-80]; 


Var center = new Circle(); 
Center.ctx = ctx; 

center.x = 100; 

center.y = 100; 

center.radius = 5; 

center.fill = true; 
center.borderColor = ' green '; 


for (Var i=0,1s=[],cache;i<12;i++){ 
cache = 1s[i] = new Line(); 
cache.ctx = ctx; 

cache.x = 100; 

cache.y 100; 

cache .borderColor = " green "7 
cache.borderWidth = 2; 
cache.rotation = i * 30; 
cache.start = [0,-70]; 

cache.end = [0,-80]; 


timerId = setInterval (function(){ 
// 清除 画布 

ctx.clearRect (0,0,200,200); 

// 填充 背景 色 

ctx.fillstyle = 'green'; 
ctx.fillRect (0,0,200,200); 


// 表盘 

circle.update(); 

// 刻度 

for (var i=0;cache=ls[i++];)cache.update(); 
// 时 针 


hour .rotation = (new Date () ) .getHours () * 30; 
hour.update (); 

DE 

minute.rotation = (new Date()).getMinutes() * 6; 
minute.update (); 

// 秒针 

seconds.rotation = (new Date () ) .getSeconds () * 6; 
seconds .Update () 

// 中 心 


Center -update () 7 
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}, (1000/frameRate) 10) > 
}elsef{ 
alert (' 您 的 浏览 器 不 支持 canvas 无 法 预览 时 钟 ! ') ; 
} 
</script> 


由 于 篇 幅 比较 长 ， 上 面 只 显示 了 部 分 代码 。 上 面 的 代码 首先 绘制 不 同类 型 的 图 形 ， 例 如 时 
针 、 秒 针 和 分 针 等 。 然 后 在 将 其 组 合 在 一 起 ， 并 根据 时 间 定 义 时 针 等 指向 。 在 下 11.0 中 的 浏 
览 效果 如 图 16-27 所 示 ， 页 面 中 出 现 了 一 个 时 钟 ， 其 秒针 在 不 停 地 移动 。 
二 -一 I0D “六 
丫 Ci\Users\Administrat 图 ”搜索 .. 
局 制作 动态 页 面 时 钟 x | 


文件 (P) 编辑 (E) 查看 V) 收藏 夫 (A) 工具 (T) 帮助 (H) 
将 赂 百度 一 下 ， 你 8 知道 


图 16-27 “最终 特效 


16.13 专家 解 惑 


1. 定义 canvas 宽度 和 高 度 时 ， 是否 可 以 在 CSS 属性 中 定义 呢 ? 
在 添加 一 个 canvas 标记 的 时 候 ， 会 在 canvas 的 属性 里 填写 要 初始 化 的 canvas 的 高 度 和 宽度 : 
<canvas width="500" height="400">Not Supported!</canvas> 

如 果 把 高 度 和 宽度 写 在 了 CSS 里 面 , 那么 在 绘图 的 时 候 坐标 获取 会 出 现 差 异 , canvas.width 
和 canvas.height 分 别 是 300 和 150， 和 预期 的 不 一 样 。 这 是 因为 canvas 要 求 这 两 个 属性 必须 和 
canvas 标记 一 起 出 现 。 

2. 画布 中 stroke 和 他 二 者 的 区 别 是 什么 ? 

HIMLS 中 将 图 形 分 为 两 大 类 : 第 一 类 称 作 stroke， 就 是 轮廓 、 勾 勒 或 者 线条 ， 总 之 图 形 
是 由 线条 组 成 的 ， 第 二 类 称 作 fill， 就 是 填充 区 域 。 上 下 文 对 象 中 有 两 个 绘制 矩形 的 函数 ， 可 
以 让 我 们 很 好 地 理解 这 两 大 类 图 形 的 区 别 : 一 个 是 strokeRect， 还 有 一 个 是 fillRect。 
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目前 ,在 网 页 上 没有 关于 音频 和 视频 的 标准 ， 多 数 音频 和 视频 都 是 通过 插件 来 播放 的 。 为 
此 ，HIML5 新 增 了 音频 和 视频 的 标记 。 本 章 将 讲述 音频 和 视频 的 基本 概念 、 常 用 属性 、 解 码 
器 和 浏览 器 的 支持 情况 。 


17.1 <audio> 标 记 
目前 ， 大 多 数 音频 是 通过 插件 来 播放 音频 文件 的 ， 例 如 常见 的 播放 插件 为 Flash， 这 就 是 
为 什么 用 户 在 用 浏览 器 播放 音乐 时 常常 需要 安装 Flash 插件 的 原因 。 但 是 并 不 是 所 有 的 浏览 器 


都 拥有 同样 的 插件 。 
和 HTML4 相 比 ，HITML5 新 增 了 <audio> 标 记 ， 规 定 了 一 种 包含 音频 的 标准 方法 。 


17.1.1 <audio> 标 记 概述 
<audio> 标 记 主 要 是 定义 播放 声音 文件 或 者 音频 流 的 标准 。 支 持 3 种 音频 格式 , 分 别 为 ogg、 


mp3 和 wav。 


如 果 需 要 在 HIML5 网 页 中 播放 音频 ， 输 入 的 基本 格式 如 下 : 


<audio src="song.mp3" controls="controls"> 
</audio> 


其 中 ，src 属性 用 于 规定 要 播放 的 音频 的 地 址 ，controls 属性 用 于 提供 添加 播放 、 暂 
EE 停 和 音量 的 控件 。 


另外 ， 在 <audio> 与 </audio> 之 间 插 入 的 内 容 是 不 支持 audio 元 素 浏览 器 显示 的 。 


【 例 17.1】 《实例 文件 : ch17\17.1.html) 


<!DOCTYPE html> 
<html> 

<head> 
<title>audio</title> 
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<head> 
<body> 
<audio src="song.mp3" controls="controls"> 
您 的 浏览 器 不 支持 audio 标 记 ! 
</audio> 
</body> 
</html> 


如 果 用 户 的 浏览 器 是 正 8.0 或 以 前 的 版 本 ， 浏 览 效 果 如 图 17-1 所 示 ， 可 见 目 前 焉 浏览 器 
还 不 支持 <audio> 标 记 。 
在 正 11.0 中 的 浏览 效果 如 图 17-2 所 示 , 可 以 通过 加 载 的 音频 控制 条 听 到 加 载 的 音频 文件 。 


ea 0 
J [vzms ate D -cx| 与 wa l 
a MM EE Fa) TERM Wo 
息 的 浏览 如 不 支持 sudio 标 记 ! 文件 [F) 篇 和 (二 看 (V) 禾 若 夫 (A) 工具 [帮助 (H) 
育 甸 百 友 一 下 , 尔 叶 知 理 
OUEL ) 四 
图 17-1 不 支持 <audio> 标 记 的 效果 图 17-2 支持 <audio> 标 记 的 效果 


17.1.2 ”<audio> 标 记 的 属性 
<audio> 标 记 的 常见 属性 和 含义 如 表 17-1 所 示 。 


表 17-1 <audio> 标 记 常见 属性 


属性 值 描述 

autoplay Autoplay〔 自 动 播放 ) 音频 在 就 绪 后 马上 播放 

controls Controls 控制) 向 用 户 显示 控件 ， 比 如 播放 按钮 

loop Loop (循环 ) 每 当 音频 结束 时 重新 开始 播放 

preload Preload (加载) 音频 在 页 面 加载 时 进行 加 载 ， 并 预备 播放 。 如 果 使 用 autoplay， 
就 忽略 该 属性 

src url (地 址 ) 要 播放 的 音频 的 URL 地 址 

autoplay Autoplay〔 自 动 播放 ) | 音频 在 就 绪 后 马上 播放 


另外 ，<audio> 标 记 可 以 通过 source 属性 添加 多 个 音频 文件 ， 具 体格 式 如 下 : 


<audio controls="controls"> 
<source src="123.0gg" type="audio/ogg"> 
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<source src="123.mp3" type="audio/mpeg"> 
</audio> 


17.1.3 ”音频 解码 器 


音频 解码 器 定义 了 音频 数据 流 编码 和 解码 的 算法 。 其 中 ,编码 器 主要 是 对 数据 流 进行 编码 
操作 ， 用 于 存储 和 传输 。 音 频 播放 器 主要 是 对 音频 文件 进行 解码 ， 然 后 进行 播放 操作 。 目 前 ， 
使 用 较 多 的 音频 解码 器 是 Vorbis 和 ACC。 


17.1.4 <audio> 标 记 浏览 器 的 支持 情况 


目前 ， 不 同 的 浏览 器 对 <audio> 标记 支持 也 不 同 。 表 17-2 列 出 应 用 最 为 广泛 的 浏览 器 对 
<audio> 标 记 的 支持 情况 。 


表 17-2 ”<audio> 标 记 的 浏览 器 支持 情况 


浏览 器 ”| Firefox 3.5 及 | IE 9.0 及 “| Opera 10.5 及 | Chrome 3.0 及 | Safari 3.0 及 
音频 格式 更 高 版 本 更 高 版 本 ”| 更 高 版 本 更 高 版 本 更 高 版 本 


17.2 ”<video> 标 记 


和 音频 文件 播放 方式 一 样 ， 大 多 数 视频 文件 在 网 页 上 也 是 通过 插件 来 播放 的 , 例如 常见 的 
播放 插件 为 Flash。 由 于 不 是 所 有 的 浏览 器 都 拥有 同样 的 插件 ， 因 此 需要 一 种 统一 的 包含 视频 
的 标准 方法 。 为 此 ， 和 HIML4 相 比 ，HTMLS5 新 增 了 <video> 标 记 。 


17.2.1 <video> 标 记 概 述 


video 标签 主要 是 定义 播放 视频 文件 或 者 视频 流 的 标准 ， 支 持 3 种 视频 格式 ， 分 别 为 Ogg、 
WebM 和 MPEG4。 
如 果 需 要 在 HIMLS 网 页 中 播放 视频 ， 输 入 的 基本 格式 如 下 : 


<video src="123.mp4" controls="controls"> 
</ video > 


另外 ， 在 <video > 与 </ video > 之 间 揪 入 的 内 容 是 供 不 支 持 video 元 素 的 浏览 器 显示 的 。 
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【 例 17.2】〔 实 例文 件 : ch17\17.2.html) 
<!DOCTYPE html> 

<html> 

<head> 

<title>video</title> 

<head> 

<body> 

<video src="123.mp4" controls="controls"> 
您 的 浏览 器 不 支持 video 标 记 ! 

</video> 

</body> 

</html> 


如 果 用 户 的 浏览 器 是 正 11.0 以 前 的 版 本 ， 浏 览 效 果 如 图 17-3 所 示 ， 可 见 正 11.0 以 前 的 

版 本 浏览 器 不 支持 <video> 标 记 。 
在 正 11.0 中 的 浏览 效果 如 图 17-4 所 示 ， 可 以 看 到 加 载 的 视频 控制 条 界面 。 单 击 【 播 放 】 
按钮 ， 即 可 查看 视频 的 内 容 。 
上 a 


[全 Fwapms a P - © x ||B video 
OE WE 


您 的 浏览 器 不 支持 video 标 签 ! 


图 17-3 不 支持 <video> 标 记 的 效果 图 17-4 支持 <video> 标 记 的 效果 


17.2.2 ”<video> 标 记 的 属性 


<video> 标 记 的 常见 属性 和 含义 如 表 17-3 所 示 。 


表 17-3 ”<video> 标 记 常见 属性 


视频 在 就 绪 后 马上 播放 

向 用 户 显示 控件 ， 比 如 播放 按钮 

loop | loop 。 | 每 当 视频 结束 时 重新 开始 播放 

视频 在 页 面 加 载 时 进行 加 载 ， 并 预备 播放 如 果 使 用 "autoplay"， 就 忽略 该 属性 


autoplay autoplay 


controls controls 


preload preload 
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( 续 表 ) 
值 描述 
ul 要 播放 的 视频 的 URL 
width 宽度 值 设置 视频 播放 器 的 宽度 
height 高 度 值 | 设置 视频 播放 器 的 高 度 
poster url 当 视 频 未 响应 或 缓冲 不 足 时 ， 该 属性 值 链接 到 一 个 图 像 。 该 图 像 将 以 一 定 比 
例 被 显示 出 来 
由 表 17-3 可 知 ， 用 户 可 以 自 定义 视频 文件 显示 的 大 小 。 例 如 ， 想 让 视频 以 320 像素 X240 


像素 显示 ， 可 以 加 入 width 和 height 属性 。 具 体格 式 如 下 : 


<video width="320" height="240" controls src="123.mp4" > 
</video> 


另外 ，<video> 标 记 可 以 通过 source 属性 添加 多 个 视频 文件 ， 具 体格 式 如 下 : 


<video controls="controls"> 

<source src="123.0gg" type="video/o0gg"> 
<source src="123.mp4" type="video/mp4"> 
</video> 


17.2.3 ”视频 解码 器 

视频 解码 器 定义 了 视频 数据 流 编码 和 解码 的 算法 。 其 中 ,编码 器 主要 是 对 数据 流 进 行 编码 
操作 ， 用 于 存储 和 传输 。 视 频 播放 器 主要 是 对 视频 文件 进行 解码 ， 然 后 进行 播放 操作 。 

目前 ， 在 HIML5 中 ， 使 用 比较 多 的 视频 解码 文件 是 Theora、H.264 和 VP8。 
17.2.4 ”<video> 标 记 浏 览 器 的 支持 情况 


目前 ， 不 同 的 浏览 器 对 <video> 标 记 支持 也 不 同 。 表 17-4 列 出 应 用 最 为 广泛 的 浏览 器 对 
<video> 标 记 的 支持 情况 。 


表 17-4 <video> 标 记 的 浏览 器 支持 情况 


Firefox 4.0 Opera 10.6 Chrome 6.0 Safari 3.0 及 
及 更 高 版 本 及 更 高 版 本 及 更 高 版 本 更 高 版 本 


支持 支持 支持 
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17.3 音频 和 视频 中 的 方法 


在 HTML5 网 页 中 ， 操 作 音 频 或 视频 文件 的 常用 方法 包括 canPlayType() 方 法 、load() 方 
法 、play() 方 法 和 pause() 方 法 。 


17.3.1 canPlayType() 方 法 


canPlayType0 方 法 用 于 检测 浏览 器 是 否 能 播放 指定 的 音频 或 视频 类 型 。canPlayType0 方 法 
返回 值 包含 如 下 内 容 。 


(1) probably: 浏览 器 全 面 支持 指定 的 音频 或 视频 类 型 。 
(2) maybe: 浏览 器 可 能 支持 指定 的 音频 或 视频 类 型 。 
(3)""( 空 字符 串 ): 浏览 器 不 支持 指定 的 音频 或 视频 类 型 。 


注意 : 目前 ,所 有 主流 浏览 器 都 支持 canPlayType0) 方 法 。Internet Explorer 8 及 之 前 的 版 本 
不 支持 该 方法 。 


【 例 17.3】〔 实 例文 件 ，ch17\17.3.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title>canPlayType () 方 法 </title> 

</head> 

<body> 

<p> 浏 览 器 可 以 播放 MP4 视 频 吗 ?<span> 

<button onclick="supportType (event, 'video/mp4', 'avcl .42E01E, 
mp4a.40.2')" type="button"> 检 查 </button> 

</span></p> 

<p> 浏 览 器 可 以 播放 oGG 音频 吗 ?<span> 

<button onclick="supportType (event, 'audio/o0gg', 'theora, vorbis')" 
type="button"> 检 查 </button> 

</span></p> 


<script> 
function supportType (e,vidType,codType) 
{ 
myVid=document .createElement ('video'); 
isSupp=myVid.canPlayType (vidType+';codecs=""'+codType+'"'); 
if (issupp=="") 
{ 
issupp=" 不 支持 "; 
1 
e.target .parentNode .innerHTML=" 检 查 结果 : " + issupp; 
} 
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</script> 

</body> 

</html> 

在 正 11.0 中 的 浏览 效果 如 图 17-5 所 示 。 单 击 【 检 查 】 按 钮 ， 即 可 查看 浏览 器 对 音频 和 视 
频 的 支持 情况 ， 如 图 17-6 所 示 。 


- Oo x = 口 关 
站 ”D*\ 本 书 源 化 克 Kode 图 ”人 搜索.… 站 ”DNA 书 源 代码 \code 凡 图 ~ 叫 。 搜 索 .. 
避 canplayTypef 方 法 x 大 canplayType0 方 法 x 
文件 (F) 编 辐 (E) 查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H] 文件 (F) 编 结 (和 ] 查看 (V) 收藏 于 (A) 工具 (T) 帮助 (H) 
褒 省 百度 -下 , 你 M90 表 高 名 下 区- 下, 你 WX0 班 
浏览 器 可 以 播放 MP4 视 频 吗 ? | 痊 查 | 浏览 器 可 以 播放 MP4 视 频 吗 ?检查 结果 : probably 
浏览 器 可 以 播放 00G 音频 吗 ?9 [和 二 浏览 器 可 以 播放 0GG 音频 吗 ?检查 结果 : 不 支持 
图 17-5 预览 效果 图 17-6 查看 浏览 器 对 音频 和 视频 的 支持 情况 
17.3.2 load() 方 法 
load() 方 法 用 于 重新 加 载 音频 或 视频 文件 。load() 方 法 的 语法 格式 如 下 : 
audiolvideo.load() 
【 例 17.4】〔 实 例文 件 : ch17\17.4.html) 
<!DOCTYPE html> 
<html> 
<head> 
<title>load() 方 法 </title> 
</head> 
<body> 
<button onclick="changeSource()"” type="button"> 更 改 加 载 视频 </button> 
<br /> 


<video id="videol" controls="controls" autoplay="autoplay"> 
<source id="mp4 src" src="123.mp4" type="video/mp4"> 
<source id="mp4 src" src="124.mp4" type="video/mp4"> 
您 的 浏览 器 不 支持 HTML5 video 标签 。 


</video> 


<script> 

function changeSource () 

{ 
document .getElementById("mp4 src") .src="movie.mp4"; 
document .getElementById("mp4 src") .src="movie.mp4"; 
document .getElementById ("videol1") .10ad(); 

} 

</script> 
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</body> 
</html> 


在 正 11.0 中 的 浏览 效果 如 图 17-7 所 示 。 单 击 【 更 改 加 载 视频 】 按 钮 ， 即 可 重新 加 载 视频 
文件 ， 如 图 17-8 所 示 。 


RAve -OO mk DP- 外 


wi) Sm EM Wa) TA wah) 
育 aEz -下 ,catme 


EE 


图 17-7 预览 效果 图 17-8 重新 加 载 视频 文件 


17.3.3 ”play() 方 法 和 pause() 方 法 
play0 方 法 开始 播放 音频 或 视频 文件 。pause0 方 法 用 于 暂停 当前 播放 的 音频 或 视频 文件 。 


【 例 17.5】〔 实 例文 件 : ch17\17.5.html) 
<!DOCTYPE html> 
<html> 
<head> 
<title> play() 方 法 </title> 
</head> 
<body> 
<button onclick="playVid()" type="button"> 播 放 视频 </button> 
<button onclick="pauseVid()" type="button"> 暂 停 视频 </button> 
<br /> 
<video id="videol"> 
<source Src="124.mp4" type="video/mp4"> 
您 的 浏览 器 不 支持 HTML5 video 标签 。 
</video> 
<script> 
Var myVideo=document .getElementById ("videol1"); 
function playVid() 
{ 
myVideo.play(); 
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function pauseVid () 
{ 
myVideo.pause(); 
} 
</script> 
</body> 
</html> 


在 下 11.0 中 的 浏览 效果 如 图 17-9 所 示 。 单 击 【播放 视频 】 按 钮 ， 开 始 播放 视频 ; 单 击 【 和 暂 
停 视频 】 按 钮 ， 暂 停 播放 视频 。 


加 DA 书 大 fodev 大 HBV 图 ”C， 二 家 - Pp- © 
局 play0 方 法 x 区 

文件 (F) 强 轰 (E] 查看 (V) 路 荣 天 (A) 工 刁 (1) 帮助 (H) 
请 全 二 度 一 下 ,外 


图 17-9 预览 效果 


17.4 音频 和 视频 中 的 属性 
在 HIMLS 的 网 页 中 ， 关 于 音频 和 视频 中 的 属性 非常 多 ， 本 节 将 挑选 几 个 最 常用 的 进 
行 讲 解 。 
17.4.1 autoplay 属性 


autoplay 属性 设置 或 返回 音频 或 视频 是 否 在 加 载 后 立即 开始 播放 。 
设置 autoplay 属性 的 语法 格式 如 下 : 


audiolvideo.autoplay=true|false 


返回 autoplay 属性 的 语法 格式 如 下 : 
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audiolvideo.autoplay 


其 中 ，autoplay 属性 的 取 值 包括 true 和 false。 
(1) true: 设置 音频 或 视频 在 加 载 后 立即 开始 播放 。 
(2) false: 默认 值 。 设 置 音 频 或 视频 在 加 载 后 不 立即 开始 播放 。 


【 例 17.6】〔 实 例文 件 ，ch17\17.6.html) 


<!DOCTYPE html> 
<html> 

<head> 

<title> autoplay 属 性 </title> 
</head> 

<body> 


<button onclick="enableAutoplay()"” type="button"> 启 动 自动 播放 </button> 
<button onclick="disableAutoplay ()"” type="button"> 禁 用 自动 播放 </button> 
<button onclick="checkAutoplay ()"” type="button"> 检 查 自动 播放 状态 </button> 


ER 
<video id="videol" controls="controls"> 
<source src="mov bbb.mp4" type="video/mp4"> 
您 的 浏览 器 不 支持 HTML5 video 标 签 。 
</video> 
<script> 
myVid=document .getElementById("videol"); 
function enableAutoplay () 
{ 
myVid.autoplay=true; 
myVid.load () 
} 
function disableAutoplay() 
{ 
myVid.autoplay=false; 
myVid.1o0ad(); 
function checkAutoplay() 
{ 
alert (myVid.autoplay); 
} 
</script> 
</body> 
</html> 


在 正 11.0 中 的 浏览 效果 如 图 17-10 所 示 。 单 击 【 启 动 自动 播放 】 按 钮 ， 然 后 单 和 
动 播放 状态 】 按 钮 ， 即 可 看 到 此 时 autoplay 属性 为 tue。 


上 【检查 自 
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问 DA 古书 洪 代 丽 Kode\ 漠 代 古 | 置 ” || 扫 天- Dp- © 
瑟 autopby 所 性 

文件 (F) 柱 辐 {5) 至 看 (V】 收 荆 夫 (A) 工具 (党 助 (H) 

高 EE 下 ,ms 


卢 动 自动 播放 | | 禁用 自动 播放 


输 查 自动 摸 放 状 坊 


QO) 0:00:11 


图 17-10 ”预览 效果 


17.4.2 buffered 属性 


buffered 属性 返回 TimeRanges 对 象 .TimeRanges 对 象 表示 用 户 的 音频 或 视频 缓冲 范 
围 。 缓 冲 范围 指 的 是 已 缓冲 音频 或 视频 的 时 间 范 围 。 如 果 用 户 在 音频 或 视频 中 跳跃 播放 ， 
就 会 得 到 多 个 缓冲 范围 。 

返回 buffered 属性 的 语法 格式 如 下 : 


audiolvideo.buffered 


【 例 17.7】 《实例 文件 : ch17\17.7.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> buffered 属性 </title> 

</head> 

<body> 

<button onclick="getFirstBuffRange () " type="button"> 获 得 视频 的 第 一 段 缓冲 范围 

</button> 

<be /Ss 

<video id="videol" controls="controls"> 
<source src="moVv bbb.mp4" type="video/mp4"> 
您 的 浏览 器 不 支持 HTML5 video 标签 。 

</video> 

<script> 

myVid=document .getElementById("videol"); 

function getFirstBuffRange() 


alert ("开始 : " + myVid.buffered.start (0) + "结束 : " + 
myVid.buffered.end (0)); 
} 
<script> 
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</body> 
</html> 


在 正 11.0 中 的 浏览 效果 如 图 17-11 所 示 。 播放 一 段 视频 后 , 单 击 【 获 得 视频 的 第 一 段 缓冲 
范围 】 按 钮 ， 即 可 看 到 此 时 视频 的 缓冲 范围 。 


ER 国 - 吕 || 生 天 万- 【] 
三 buflered 压 性 
文 作坊 生日、 二 看 V】 收音 天 A) 工 R(T) 攻 区 (H) 


六 向 网 页 的 入 时 


息 se emer0esss 


OO 0:00:14 


图 17-11 预览 效果 


17.4.3 ”controls 属性 

controls 属性 设置 或 返回 浏览 器 应 当 显示 标准 的 音频 或 视频 控件 。 标 准 的 音频 或 视频 
控件 包 插 播放、 暂停、 进度 条 、 音 量 、 全 屏 切 换 、 字 幕 和 轨道 。 

设置 controls 属性 的 语法 格式 如 下 : 

audiolvideo.controls=true|false 

返回 controls 属性 的 语法 格式 如 下 : 

audiolvideo.controls 


其 中 ，controls 属性 的 取 值 包 括 tue 和 false。 


(1) true: 设置 显示 控件 。 
(2) false: 默认 值 。 设 置 不 显示 控件 。 


【 例 17.8】“〈 实 例文 件 : ch17\17.8.html) 


<1DOCTYPE html> 
<html> 
<head> 
<title>controls 属性 </title> 


HTML5 中 的 音频 和 视频 第 /7 党 


</head> 
<body> 
<button onclick="enableControls()" type="button"> 启 动 控 件 </button> 
<button onclick isableControls ()"” type="button"> 禁 用 控件 </button> 
<button onclick="checkControls () " type="button"> 检 查 控件 状态 </button> 
<br> 
<video id="videol"> 
<source src="124.mp4" type="video/mp4"> 
您 的 浏览 器 不 支持 HTML5 video 标签 。 
</video> 
<script> 
myVid=document .getElementById("videol"); 
function enableControls() 
4 
myVid.controls=true; 
myVid.1o0ad(); 
} 
function disableControls() 
{ 
myVid.controls=false; 
myVid.1o0ad(); 
} 
function checkControls () 
{ 
alert (myVid.controls); 
} 
</script> 
</body> 
</html> 


在 正 11.0 中 的 浏览 效果 如 图 17-12 所 示 。 单 击 【 启 动 控件 】 按 钮 ， 然 后 单 击 【检查 控件 状 


态 】 按 钮 ， 即 可 看 到 此 时 controls 属性 为 tue。 


DA 本 书 轨 代 码 ode\ 淖 代表 | 国 ”|| 皖 太 . Dp- ® 


局 controks 后 性 
文 位 {(R)” 塌 恕 (日 、 吾 看 (V】 收 桂 实 (A) 工 挟 (TD) 和 现 助 (H) 
记 3 下 区 下, ARSUE 


图 17-12 ”预览 效果 
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17.4.4 ”currentSrc 属性 


curentSrc 属性 返回 当前 音频 或 视频 的 URL。 如 果 未 设置 音频 或 视频 ， 就 返 
返回 currentSrc 属性 的 语法 格式 如 下 : 


五 


空 字符 串 。 


audiolvideo.currentSrc 


【 例 17.9】 《实例 文件 : ch17\17.9.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> currentsrc 属 性 </title> 
</head> 

<body> 


<button onclick="getVid()" type="button"> 获 得 当前 视频 的 URL</button> 

<br> 

<video id="videol" controls="controls"> 
<source src="124.mp4" type="video/mp4"> 
您 的 浏览 器 不 支持 HTML5 video 标签 。 

</video> 

<script> 

myVid=document .getElementById("videol"); 

function getVid() 

{ 
alert (myVid.currentsrc); 

} 

</script> 

</body> 

</html> 


在 正 11.0 中 的 浏览 效果 如 图 17-13 所 示 。 单 击 【 获 得 当前 视频 的 URL)】 按钮 ， 即 可 看 到 
当前 视频 的 URL 路 径 。 


间 DA 本 书 深 代码 ode\ 淖 代 友 | 图 -中 || 皖 天 - 只 - Ee 
下 currentsrc 天 信 
文件 (F) 据 蜗 (6 得 看 (V) 收 甜 夫 (A) 工兵 (T) 磺 遇 (H) 
记 全 百 区 一 下 ,AP 下 
获得 当前 可 师 交 URL 


图 17-13 ”预览 效果 
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17.5 ”专家 解 惑 


1. 在 HTML5 网 页 中 添加 所 支持 格式 的 视频 ， 不 能 在 Firefox 8.0 浏览 器 中 正常 播 
放 ,为 什么 ? 

目前 ，HTMLS 的 <video> 标 记 对 视频 的 支持 不 仅仅 有 视频 格式 的 限制 ， 还 有 对 解码 器 的 限 
制 。 规 定 如 下 : 


(1) 如 果 视 频 是 Ogg 格式 的 文件 ， 就 需要 带 有 Thedora 视频 编码 和 Vorbis 音频 编码 
的 视频 。 

(2) 如 果 视 频 是 MPEG4 格式 的 文件 ， 就 需要 带 有 了 HH.264 视频 编码 和 AAC 音频 编码 
的 视频 。 

(3) 如 果 视 频 是 WebM 格式 的 文件 ， 就 需要 带 有 VP8 视频 编码 和 Vorbis 音频 编码 的 
视频 。 


2. 在 HTML5 网 页 中 添加 mp4 格式 的 视频 文件 ,为 什么 在 不 同 的 浏览 器 中 视频 控件 
显示 的 外 观 不 同 ? 

在 HTMLS 中 ， 规 定 用 controls 属性 来 控制 视频 文件 的 播放 、 和 暂停 、 停 止 和 调节 音量 的 操 
作 。controls 是 一 个 布尔 属性 ， 所 以 需要 赋予 任何 值 。 一 旦 添加 了 此 属性 ， 就 等 于 告诉 浏览 器 
需要 显示 播放 控件 并 允许 用 户 操作 。 

因为 每 一 个 浏览 器 负责 内 置 视频 控件 的 外 观 不 同 , 所 以 在 不 同 的 浏览 器 中 将 显示 不 同 的 视 
频 控件 外 观 。 
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在 HTML5 中 ， 由 于 地 理 定位 、 离 线 Web 应 用 和 Web 存储 技术 的 出 现 ， 用 户 可 以 查找 网 
站 访问 者 的 当前 位 置 。 在 线 时 可 以 快速 存储 网 站 的 相关 信息 ， 当 用 户 再 次 访问 网 站 时 ， 将 大 大 
提升 访问 的 速度 ， 即 使 网 站 脱 机 ， 也 仍然 可 以 访问 站 点 。 本 章 主要 讲述 上 述 新 技术 的 原理 和 使 
用 方法 。 


18.1 获取 地 理 位 置 


在 HIMLS 网 页 代码 中 ,通过 一 些 有 用 的 API 可 以 查找 访问 者 当前 的 位 置 。 下 面 将 详细 讲 
述 地 理 位 置 获 取 的 方法 。 


18.1.1 地 理 定位 的 原理 
访问 者 浏览 网 站 的 方式 不 同 ， 可 以 通过 下 列 方式 确定 其 位 置 。 


(1) 如 果 网 站 浏览 者 使 用 电脑 上 网 ， 可 通过 获取 浏览 者 的 瑟 地 址 来 确定 其 具体 位 置 。 

(2) 如 果 网 站 浏览 者 通过 手机 上 网 ， 可 通过 获取 浏览 者 的 手机 信号 接收 塔 来 确定 其 具体 
位 置 。 

(3) 如果 网 站 浏览 者 的 设备 上 具有 GPS 硬件 , 可 通过 获取 GPS 发 出 的 载波 信号 来 获取 其 
具体 位 置 。 

(4) 如 果 网 站 浏览 者 通过 无 线 上 网 ， 可 通过 无 线 网 络 连接 来 获取 其 具体 位 置 。 


API 是 应 用 程序 的 编程 接口 ， 是 一 些 预先 定义 的 函数 ， 目 的 是 提供 应 用 程序 与 开发 
EE 人 员 基 于 某 软件 或 硬件 以 访问 一 组 例 程 的 能 力 , 而 又 无 须 访问 源码 、 理 解 内 部 工作 
机 制 的 细节 。 
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18.1.2 ”地 理 定位 的 函数 


通过 地 理 定位 ， 可 以 确定 用 户 的 当前 位 置 ， 并 能 获取 用 户 地 理 位 置 的 变化 情况 。 其 中 ， 最 
常用 的 就 是 API 中 的 getCurrentposition 函数 。 
getCurrentposition 函数 的 语法 格式 如 下 : 


void getCurrentPosition (successCallback, errorCallback, options); 


其 中 ，successCallback 参数 是 指 在 位 置 成 功 获取 时 用 户 想 要 调用 的 函数 名 称 ;errorCallback 参 
数 是 指 在 位 置 获 取 失 败 时 用 户 想 要 调用 的 函数 名 称 ; options 参数 指出 地 理 定位 时 的 属性 设置 。 


访问 用 户 位 置 是 耗 时 的 操作 ， 同 时 出 于 隐私 问题 ， 还 要 取得 用 户 的 同意 。 
技巧 棍 示 


如 果 地 理 定位 成 功 ， 那 么 新 的 Position 对 象 将 调用 displayOnMap 函数 ， 显 示 设 备 的 当前 位 置 。 

Position 对 象 的 含义 是 什么 呢 ? 作为 地 理 定位 的 API,， Position 对 象 包含 位 置 确定 时 的 时 间 
稚 〈timestamp) 和 包含 位 置 的 坐标 (coords) ， 具 体 语法 格式 如 下 : 

Interface position 

{ 

readonly attribute Coordinates cords; 


readonly attribute DOMTimeStamp timestamp:; 
J 


18.1.3 ”指定 纬度 和 经 度 坐 标 
对 地 理 定位 成 功 后 ， 将 调用 displayOnMap 函数 。 此 函数 如 下 : 


function displayonMap (position) 

{ 

Var latitude=positon.coords.1latitude; 

var longitude=postion.coords.longitude; 

} 

其 中 ， 第 一 行 函数 从 Position 对 象 获取 coordinates 对 象 ， 主 要 由 API 传递 给 程序 调用 ; 第 
三 行 和 第 四 行 中 定义 了 两 个 变量 ，latitude 和 longitude 属性 存储 在 定义 的 两 个 变量 中 。 

为 了 在 地 图 上 显示 用 户 的 具体 位 置 ， 可 以 利用 地 图 网 站 的 API。 下 面 以 使 用 百度 地 图 为 例 
进行 讲解 ， 则 需要 使 用 Baidu Maps Javascript API。 在 使 用 此 API 前 ， 需 要 在 HIMLS 页 面 中 添 
加 一 个 引用 ， 有 具体 代码 如 下 ; 


<--baidu maps API> 
<script type= “text/javascript” scr= 
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“http://api.map.baidu.com/api?key=*&v=1.0&services=true” > 
</script> 


Tn 


其 中 ,* 号 代码 注册 到 key。 注 册 key 的 方法 为 : 在 “http: //openapi.baidu.com/map/index.html” 
网 页 中 ， 注 册 百 度 地 图 API， 然 后 输入 需要 内 置 百 度 地 图 页 面 的 URL 地 址 ， 生 成 API 密 钥 ， 
然后 将 key 文件 复制 保存 。 

虽然 已 经 包含 了 Baidu Maps Javascript API, 但 是 页 面 中 还 不 能 显示 内 置 的 百度 地 图 , 还 需 
要 添加 HIML 语言 ， 然 后 地 图 从 程序 转化 为 对 象 还 需要 加 入 以 下 源 代码 。 


01 <script 
type="text/javascript"scr="http://api.map.baidu.com/api?key=*&Vv=1.0&service 
= 

02 </script> 

03 <div style="width:600px;height:220px;border:lpx solid 
gary;margin-top:15px;" id="container"> 

04 </div> 

05 <script type="text/javascript"> 

06 var map=new BMap.Map ("container"); 

07 map .centerRndZoom (new BMap.Point (***,***) ,17); 

08 map .addControl (new BMap.NavigationControl ()); 

09 map .addControl (new BMap.ScaleControl () ) 7 

10 map .addControl (new BMap .OverviewMapControl ()) 7 

11 var local=new BMap.LocalSearch (map, 

2 

13 enderOptions: {map: map} 

14 } 

50s 

16 local.search ("输入 搜索 地 址 "); 

17 </script> 


上 述 代码 分 析 如 下 : 


(1) 前 2 行 主要 是 把 baidu map API 程序 植 入 源码 中 。 

(2) 第 3 行 在 页 面 中 设置 一 个 标记 ， 包 括 宽度 和 长 度 ， 用 户 可 以 自己 调整 ，border=1px 
定义 外 框 的 宽度 为 1 个 像素 ，solid 为 实 线 ，gray 为 边框 显示 颜色 ，margin-top 为 该 标记 距离 与 
上 部 的 距离 。 

(3) 第 7 行为 地 图 中 自己 位 置 的 坐标 。 

(4) 第 8 到 10 行为 植 入 地 图 缩放 控制 工具 。 

(5) 第 11 到 16 行为 地 图 中 自己 的 位 置 , 只 需 在 local search 后 填 入 自己 的 位 置 名 称 即 可 。 
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18.1.4 目前 浏览 器 对 地 理 定位 的 支持 情况 


不 同 的 浏览 器 版 本 对 地 理 定位 技术 的 支持 情况 是 不 同 的 。 表 18-1 是 常见 浏览 器 对 地 理 定 
位 的 支持 情况 。 


表 18-1 浏览 器 支持 情况 
浏览 器 名 称 支持 Web 存储 技术 的 版 本 


Internet Explorer Internet Explorer 9 及 更 高 版 本 


Firefox Firefox 3.5 及 更 高 版 本 


Opera Opera 10.6 及 更 高 版 本 
Safari 5 及 更 高 版 本 


18.2 HTML5 离线 Web 应 用 


为 了 能 在 离线 的 情况 下 访问 网 站 ， 可 以 采用 HITMLS 的 离线 Web 功能 。 下 面 来 学 习 Web 
应 用 程序 如 何 缓存 。 


18.2.1 新 增 的 本 地 缓存 


在 HTMLS5 中 新 增 了 本 地 缓存 (也 就 是 HTML 离线 Web 应 用 ) ， 主 要 是 通过 应 用 程序 组 
存 整个 离线 网 站 的 HTML、CSS、JavaScript、 网 站 图 像 和 资源 。 当 服务 器 没有 和 Intermet 建立 
连接 的 时 候 ， 也 可 以 利用 本 地 缓存 中 的 资源 文件 来 正常 运行 Web 应 用 程序 。 

另外 ， 如 果 网 站 发 生 了 变化 ， 应 用 程序 缓存 将 重新 加 载 变化 的 数据 文件 。 


18.2.2 ”本 地 缓存 的 管理 者 一 一 manifest 文件 

那么 客户 端的 浏览 器 是 如 何 知道 应 该 缓存 哪些 文件 的 呢 ? 这 就 需要 依靠 manifest 文 件 来 管 
理 。manifest 文件 是 一 个 简单 文本 文件 ， 在 该 文件 中 以 清单 的 形式 列举 了 需要 被 缓存 或 不 需要 
被 缓存 的 资源 文件 的 文件 名 称 以 及 这 些 资源 文件 的 访问 路 径 。 

Manifest 文件 把 指定 的 资源 文件 类 型 分 为 3 类 ， 分别 是 “CACHE”“NETWORK” 和 
“FALLBACK”。 这 3 类 的 含义 分 别 如 下 : 


(1) CACHE 类 别 : 该 类 别 指定 需要 被 缓存 在 本 地 的 资源 文件 。 这 里 需要 特别 注意 的 是 : 
为 某 个 页 面 指定 需要 本 地 缓存 的 资源 文件 时 ， 不 需要 把 这 个 页 面 本 身 指定 在 CACHE 类 型 中 ， 
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因为 如 果 一 个 页 面具 有 manifest 文件 ， 浏 览 器 就 会 自动 对 这 个 页 面 进行 本 地 缓存 。 

(2) NETWORK 类 别 : 该 类 别 为 不 进行 本 地 缓存 的 资源 文件 ， 这 些 资 源 文 件 只 有 当 客户 
端 与 服务 器 端 建立 连接 的 时 候 才 能 访问 。 

(3) FALLBACK 类 别 : 该 类 别 中 指定 两 个 资源 文件 ， 其 中 一 个 资源 文件 为 能 够 在 线 访问 
时 使 用 的 资源 文件 ， 另 一 个 资源 文件 为 不 能 在 线 访问 时 使 用 的 备用 资源 文件 。 


以 下 是 一 个 简单 的 manifest 文件 的 内 容 。 


CACHE MANIFEST 

# 文 件 的 开头 必须 是 CACHE MANIFEST 
CACHE: 

123.html 

myphoto.jpg 

12.php 

NETWORK: 
http://www.baidu.com/xxx 
feifei.php 

FALLBACK: 

online.js locale.js 


上 述 代码 含义 的 分 析 如 下 : 


(1) 指定 资源 文件 ， 文 件 路 径 可 以 是 相对 路 径 ， 也 可 以 是 绝对 路 径 。 指 定时 每 个 资源 文 
件 为 独立 的 一 行 。 

(2) 第 一 行 必须 是 CACHE MANIFEST， 此 行 的 作用 告诉 浏览 器 需要 对 本 地 缓存 中 的 资 
源 文件 进行 具体 设置 。 

(3) 每 一 个 类 型 都 是 必须 出 现 ， 而 且 同一 个 类 别 可 以 重复 出 现 。 如 果 文 件 开头 没有 指定 
类 别 而 直接 书写 资源 文件 ， 那 么 浏览 器 将 把 这 些 资 源 文件 视 为 CACHE 类 别 。 

(4) 在 manifest 文件 中 ， 注 释 行 以 “# ”开始 ， 主 要 用 于 进行 一 些 必要 的 说 明 或 解释 。 


为 单个 网 页 添加 manifest 文件 时 ， 需 要 在 Web 应 用 程序 页 面 上 html 元 素 的 manifest 属性 
中 指定 manifest 文件 的 URL 地 址 。 有 具体 的 代码 如 下 : 


<html manifest="123.manifest"> 
</html> 


添加 上 述 代码 后 ， 浏 览 器 就 能 够 正常 地 阅读 该 文本 文件 。 


用 户 可 以 为 每 一 个 页 面 单独 指定 一 个 mainifest 文件 ， 也 可 以 对 整个 Web 应 用 程序 
有 指定 一 个 总 的 manifest 文 件 。 
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上 述 操作 完成 后 ， 即 可 实现 资源 文件 缓存 到 本 地 。 当 要 对 本 地 缓存 区 的 内 容 进行 修改 时 ， 
只 需要 修改 manifest 文件 。 文 件 被 修改 后 ， 浏 览 器 可 以 自动 检查 manifest 文件 ， 并 自动 更 新 本 
地 缓存 区 中 的 内 容 。 


18.2.3 ”浏览 器 网 页 缓存 与 本 地 缓存 的 区 别 
浏览 器 网 页 缓存 与 本 地 缓存 的 主要 区 别 如 下 : 


(1) 浏览 器 网 页 缓存 主要 是 为 了 加 快 网 页 加 载 的 速度 ， 所 以 会 对 每 一 个 打开 的 网 页 都 进 
行 缓存 操作 ， 而 本 地 缓存 是 为 整个 Web 应 用 程序 服务 的 ， 只 缓存 那些 指定 缓存 的 网 页 。 

(2) 在 网 络 连接 的 情况 下 ， 浏 览 器 网 页 缓存 一 个 页 面 的 所 有 文件 ， 一 旦 离线 ， 用 户 单 击 
链接 时 就 会 得 到 一 个 错误 消息 。 本 地 缓存 在 离线 时 仍然 可 以 正常 访问 。 

(3) 对 于 网 页 浏览 者 而 言 ， 浏 览 器 网 页 缓存 了 哪些 内 容 和 资源 、 这 些 内 容 是 否 安全 可 靠 
等 都 不 知道 ， 而 本 地 缓存 的 页 面 是 编程 人 员 指定 的 内 容 ， 所 以 在 安全 方面 相对 可 靠 了 许多 。 


18.2.4 目前 浏览 器 对 Web 离线 应 用 的 支持 情况 
不 同 的 浏览 器 版 本 对 Web 离线 应 用 技术 的 支持 情况 是 不 同 的 。 表 18-2 是 常见 浏览 器 对 
Web 离线 应 用 的 支持 情况 。 


表 18-2 浏览 器 支持 情况 


浏览 器 名 称 支持 Web 存储 技术 的 版 本 情况 


Chrome Chrome 5 及 更 高 版 本 
Android Android 2.0 及 更 高 版 本 
18.3 Web 存储 


在 HTML5 标准 之 前 ，Web 存储 信息 需要 Cookie 来 完成 ， 但 是 Cookie 不 适合 大 量 数 据 的 
存储 ， 因 为 它们 由 每 个 对 服务 器 的 请 求 来 传递 ， 这 使 得 Cookie 速度 很 慢 而 且 效 率 也 不 高 。 为 
此 , 在 THML5 中 ，Web 存储 API 为 用 户 如 何在 计算 机 或 设备 上 存储 用 户 信息 做 了 数据 标准 的 
定义 。 


。401。| 
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18.3.1 本 地 存储 和 Cookies 的 区 别 
本 地 存储 和 Cookies 扮演 着 类 似 的 角色 ， 但 是 它们 有 根本 的 区 别 。 


(1) 本 地 存储 仅 存储 在 用 户 的 硬盘 上 并 等 待 用 户 读 取 ， 而 Cookies 是 在 服务 器 上 读 取 的 。 

(2) 本 地 存储 仅 供 客户 端 使 用 ， 如 果 需 要 服务 器 端 根据 存储 数值 做 出 反应 ， 就 应 该 使 用 
Cookies。 

(3) 读 取 本 地 存储 不 会 影响 到 网 络 带宽 ， 但 是 使 用 Cookies 将 会 发 送 到 服务 器 ， 这 样 会 
影响 到 网 络 带 宽 ， 无 形 中 增加 了 成 本 。 

(4) 从 存储 容量 上 看 ， 本 地 存储 可 存储 多 达 SMB 的 数据 ， 而 Cookies 最 多 只 能 存储 4KB 
的 数据 信息 。 


18.3.2 ”在 客户 端 存 储 数 据 
在 HTMLS5 标准 中 ， 提 供 了 以 下 两 种 在 客户 端 存储 数据 的 新 函数 。 


(1) sessionStorage: 针对 一 个 session 的 数据 存储 ， 也 被 称 为 会 话 存储 。 让 用 户 跟踪 特定 
窗口 中 的 数据 ， 即 使 同时 打开 两 个 窗口 是 同一 站 点 ， 每 个 窗口 也 有 自己 独立 的 存储 对 象 ， 但 是 
用 户 会 话 的 持续 时 间 只 是 限定 在 用 户 打开 浏览 器 窗口 的 时 间 ， 一 旦 关闭 浏览 器 窗口 ， 用 户 会 话 
就 将 结束 。 

(2) localStorage: 没有 时 间 限 制 的 数据 存储 ， 也 被 称 为 本 地 存储 ， 和 会 话 存储 不 同 ， 本 
地 存储 将 在 用 户 计算 机 上 永久 保持 数据 信息 。 关 闭 浏览 器 窗口 后 ， 如 果 再 次 打开 该 站 点 ， 将 可 
以 检索 所 有 存储 在 本 地 上 的 数据 。 


在 HTML5 中 ， 数 据 不 是 由 每 个 服务 器 请 求 传 递 的 ， 而 是 只 有 在 请 求 时 使 用 数据 ， 这 样 的 
话 存储 大 量 数据 时 不 会 影响 网 站 性 能 。 对 于 不 同 的 网 站 ， 数 据 存储 于 不 同 的 区 域 ， 并 且 一 个 网 
站 只 能 访问 其 自身 的 数据 。 


HTML5 使 用 JavaScript 来 存储 和 访问 数据 ， 为 此 ， 建 议 用 户 多 了 解 一 下 JavaScript 
ET 本 的 基本 知识 。 


18.3.3 ”sessionStorage 函数 


sessionStorage 函数 针对 一 个 session 进行 数据 存储 。 用 户 关闭 浏览 器 窗口 后 ， 数 据 会 被 自 
动 删除 。 
创建 一 个 sessionStorage 函数 的 基本 语法 格式 如 下 : 
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<script type="text/javascript"> 
sessionSstorage.abc=" ™; 
SCEDPDE> 


【 例 18.1】 “实例 文件 : ch18\18.1.html) 


<!DOCTYPE HTML> 

<html> 

<body> 

<script type="text/javascript"> 
sessionStorage.name=" 我 们 的 公司 是 : 英 达 科技 文化 公司 "; 
document .write (sessionStorage.name) 7 

</script> 

</body> 

</html> 


在 Firefox 62.0 中 的 浏览 效果 如 图 18-1 所 示 ，sessionStorage 函数 创建 的 对 象 内 容 显示 在 网 


/D:/ 丰 书 源 代码 /code/ 产 代码 /ch 


加 filey//D:/ 本 书 源 代 


我 们 的 公司 是 : 英 达 科技 文化 公司 


图 18-1 sessionStorage 函数 创建 对 象 的 效果 
下 面 继续 使 用 sessionStorage 函数 来 做 一 个 实例 ， 主 要 制作 记录 用 户 访问 网 站 次 数 的 计数 器 。 


【 例 18.2】〔 实 例文 件 : ch18\18.2.html) 


<!DOCTYPE HTML> 

<html> 

<body> 

<script type="text/javascript"> 

if(sessionStorage .count) 

{ 

sessionstorage.count=Number (sessionstorage.count)+1; 
下 

else 

{ 

sessionstorage.count=1; 

} 

document .write ("您 访问 该 网 站 的 次 数 为 : "+sessionstorage.count); 
</script> 

</body> 

</html> 


在 Firefox 62.0 中 的 浏览 效果 如 图 18-2 所 示 。 用 户 刷 新 一 次 页 面 ， 计 数 器 的 数值 将 加 1。 
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您 访问 该 网 站 的 次 数 为 : 5 


图 18-2 ”sessionStorage 方法 创建 计数 器 效果 


如 果 用 户 先 关闭 浏览 器 窗口 ， 再 重新 打开 该 网 页 ， 计 数 器 将 重 置 为 1。 
园 巧 提示 


18.3.4 localStorage 函数 


与 seessionStorage 函数 不 同 ,localStorage 函数 存储 的 数据 没有 时 间 限 制 。 也 就 是 说 网 页 浏 
览 者 关闭 网 页 很 长 一 段 时 间 后 ， 再 次 打开 此 网 页 时 ， 数 据 依 然 可 用 。 
创建 一 个 localStorage 函数 的 基本 语法 格式 如 下 : 


<script type="text/javascript"> 
localStorage.abc=" "7 
</script> 


【 例 18.3】 《实例 文件 : ch18\18.3.html) 


<!DOCTYPE HTML> 

<html> 

<body> 

<script type="text/javascript"> 

localstorage .name=" 学 习 HTML5 最 新 的 技术 : Web 存 储 "; 
document .write (localstorage.name); 

</script> 

</body> 

</html> 


在 Firefox 62.0 中 的 浏览 效果 如 图 18-3 所 示 ，localStorage 函数 创建 的 对 象 内 容 显示 在 网 页 中 。 


所 
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图 18-3 localStorage 函数 创建 对 象 的 效果 


下 面 仍然 使 用 localStorage 函数 来 制作 记录 用 户 访问 网 站 次 数 的 计数 器 。 用 户 可 以 清楚 地 
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看 到 localStorage 函数 和 sessionStorage 函数 的 区 别 。 


【 例 18.4】 “实例 文件 : ch18\18.4.html) 


<!DOCTYPE HTML> 

<html> 

<body> 

<script type="text/javascript"> 

if (localStorage.count) 

{ 

localStorage.count=Number (localStorage.count)+1; 
. 

else 

{ 

localStorage.count=1; 

} 

document .write ("您 访问 该 网 站 的 次 数 为 : "+localstorage.count"); 
</script> 

</body> 

</html> 


在 正 11.0 中 的 浏览 效果 如 图 18-4 所 示 。 用 户 刷 新 一 次 页 面 ， 计 数 器 的 数值 将 进行 加 1 操 
作 ; 用 户 先 关闭 浏览 器 窗口 ， 再 打开 该 网 页 ， 计 数 器 会 继续 上 一 次 计数 ， 而 不 会 重 置 为 1。 


~ 
外 到 地 和 GAchigl94html 只 - OX 


文 作 (D。 妨 句 (E) 查看 (V) 收藏 夫 (A)】 工具 (T) 和 
您 访问 该 网 站 的 次 数 为 ，1 


图 18-4 localStorage 函数 创建 计数 器 效果 


18.3.5 目前 浏览 器 对 Web 存储 的 支持 情况 
不 同 的 浏览 器 版 本 对 Web 存储 技术 的 支持 情况 是 不 同 的 。 表 18-3 是 常见 浏览 器 对 Web 
存储 的 支持 情况 。 
表 18-3 浏览 器 支持 情况 


浏览 器 名 称 支持 Web 存储 技术 的 版 本 


Internet Explorer Intemet Explorer 8 及 更 高 版 本 
Firefox Firefox 3.6 及 更 高 版 本 

Opera Opera 10.0 及 更 高 版 本 

Safari Safari 4 及 更 高 版 本 

Chrome Chrome 5 及 更 高 版 本 


Android Android 2.1 及 更 高 版 本 
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18.4 专家 解 惑 


1. 不 同 的 浏览 器 可 以 读 取 同 一 个 Web 中 存储 的 数据 吗 ? 

在 Web 存储 时 ， 不 同 的 浏览 器 将 存储 在 不 同 的 Web 存储 库 中 。 例 如 ， 用 户 使 用 的 是 正 
浏览 器 ， 所 有 数据 将 存储 在 正 的 Web 存储 库 中 ， 如 果 用 户 使 用 火狐 浏览 器 访问 该 站 点 ， 就 不 
E 读 取 下 浏览 器 存储 的 数据 ， 可 见 每 个 浏览 器 的 存储 是 分 开 并 独立 工作 的 。 

2. 离线 存储 站 点 时 是 否 需要 浏览 者 同意 ? 

和 地 理 定位 类 似 ， 在 网 站 使 用 manifest 文件 时 ， 浏 览 器 会 提供 一 个 权限 提示 ， 提 示 用 户 是 
否 将 离线 设 为 可 用 ， 但 是 不 是 每 一 个 浏览 器 都 支持 这 样 的 操作 。 
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使 用 HTMLS5 不 仅 可 以 设计 PC 端 网 页 ,还 可 以 设计 移动 网 页 .HTMLS 需要 和 函数 库 jQuery 
Mobile 一 起 开发 动 移动 网 站 ， 以 解决 不 同 移动 设备 上 显示 界面 统一 的 问题 。 本 章 将 重点 学 习 
jQuery Mobile 的 使 用 方法 和 技巧 。 


19.1 jQuery Mobile 概述 


jQuery Mobile 是 jQuery 在 手机 和 平板 设备 上 的 版 本 。jQuery Mobile 不 仅 会 给 主流 移动 平 
台 带 来 jQuery 核心 库 ， 还 会 发 布 一 个 完整 统一 的 jQuery 移动 UI 框架 。 通 过 jQuery Mobile 制 
作出 来 的 网 页 能 够 支持 全 球 主流 的 移动 平台 , 而 且 在 浏览 网 页 时 能 够 拥有 操作 应 用 软件 一 样 的 
触 碰 和 滑动 效果 。 

jQuery Mobile 的 优势 如 下 : 


(1) 简单 易 用 : jQuery Mobile 简单 易 用 。 页 面 开发 主要 使 用 标记 ， 无 须 或 仅 需 很 少 
JavaScript。jQuery Mobile 通过 HIMLS 标记 和 CSS3 规范 来 配置 和 美化 页 面 ， 对 于 已 经 熟悉 
HTML5 和 CSS3 的 读者 来 说 ， 上 手 非 常 容易 ， 架 构 清 晰 。 

(2) 跨 平 台 : 目前 大 部 分 的 移动 设备 浏览 器 都 支持 HTMLS5 标准 和 jQuery Mobile， 所 以 
可 以 实现 跨 不 同 的 移动 设备 , 例如 Android、Apple IOS、BlackBerry、Windows Phone、Symbian 
和 MeeGo 等 。 

(3) 提供 丰富 的 函数 库 : 常见 的 键盘 、 触 碰 功 能 等 ， 开 发 人 员 不 用 编写 代码 ， 只 需要 经 
过 简单 的 设置 ， 就 可 以 实现 需要 的 功能 ， 大 大 减少 了 程序 员 开 发 的 时 间 。 

(4) 富 的 布景 主题 和 ThemeRoller 工具 : jQuery Mobile 提供 了 布局 主题 ， 通 过 这 些 主题 
可 以 轻 轻松 松 地 快速 创建 绚丽 多 彩 的 网 页 。 通 过 使 用 jQuery UT 的 ThemeRoller 在 线 工具 ， 只 
需要 在 下 拉 菜 单 中 进行 简单 的 设置 ， 就 可 以 制作 出 丰富 多 彩 的 网 页 风格 ， 并 且 可 以 将 代码 下 载 
下 来 应 用 。 

jQuery Mobile 的 操作 流程 如 下 : 
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(1) 创建 HTML5 文件 。 
(2) 载 入 jQuery、jQuery Mobile 和 jQuery Mobile CSS 链接 库 。 
(3) 使 用 jQuery Mobile 定义 的 HTML 标准 ， 编 写 网 页 架构 和 内 容 。 


19.2” 跨 平台 移动 设备 网 页 


学 习 移 动 设备 的 网 页 设计 开发 ， 遇 到 最 大 的 难题 就 是 跨 浏 览 器 支持 的 问题 。 为 了 解决 这 个 
问题 ，jQuery 推出 了 新 的 函数 库 jQuery Mobile， 主 要 用 于 统一 当前 移动 设备 的 用 户 界面 。 


19.2.1 移动 设备 模拟 器 

网 页 制作 完成 后 ， 需 要 在 移动 设备 上 预览 最 终 的 效果 。 为 了 方便 预览 效果 ， 用户 可 以 使 用 
移动 设备 模拟 器 ， 常 见 的 移动 设备 模拟 器 是 Opera Mobile Emulator。 

Opera Mobile Emulator 是 一 款 针 对 电脑 桌面 开发 的 模拟 移动 设备 的 浏览 器 ， 几 乎 完全 重 现 
Opera Mobile 手机 浏览 器 的 使 用 效果 , 可 自行 设置 需要 模拟 的 不 同型 号 的 手机 和 平板 电脑 配置 ， 
然后 在 电脑 上 模拟 各 类 手机 等 移动 设备 访问 网 站 。 

Opera Mobile Emulator 的 下 载 网 址 为 http://www.opera.com/zh-cn/developer/mobile-emulator/, 可 
根据 不 同 的 系统 选择 不 同 的 版 本 ， 这 里 选择 Windows 系统 下 的 版 本 ， 如 图 19-1 所 示 。 

[加 JJO mp/ opora comiah cr/dovelopar/mobie emator De © 


| © opera Mobile Qassic E.. * 
文件 (站 坊 雹 E)】 可 看 (V) 必 赢 去 A) 工具 (站 


i) 


Your Web, documented. 


wm TS 


Do your mobile development straight from your desktop. and pair it with Opera Dragonfiy for advanced 


图 19-1 Opera Mobile Emulator 的 下 载 页 面 


下 载 并 安装 之 后 启动 Opera Mobile Emulator， 打 开 如 图 19-2 所 示 的 窗口 ， 在 【资料 】 列 表 
中 选择 移动 设备 的 类 型 ， 这 里 选择 【LG Optimus 3D】 选 项 ， 单 击 【 启 动 】 按 钮 。 
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打开 欢迎 界面 ， 用 户 可 以 单 击 不 同 的 链接 ， 查 看 该 软件 的 功能 ， 如 图 19-3 所 示 。 


愉 opera Mo- 一 口 x 


欢迎 使 用 Opera Mobile 
12.1! 


© opera Mobile Emulator 一 x 介绍 


资料 


HTCOneX ^ 分辩 靳 WYGA Portrait (480X800) ~ 旺 标 

HH ion 

TC Sensatio 测 [3 i ey | 
一 


HTC Tattoo 
HTC Wildfire 像素 密度 216 = 


[一 一 添加 MA 标签 式 浏览 
LG Optimus 3D Ey 
LG Optimus One . 
LG T-Mobile G2X Vser Agent 字符 串 Android 


LU ldeapad K1 
Motorola Mri 46 Ms E a-rasewnu 关 y 
BE 
全 和 /和 为 WR 所 吉 近 全 重要 六 各 口 
者 二 更 py 语 言 LG opt 480x80! ppl 21¢ [Gs [50% | 
图 19-2 参数 设置 界面 图 19-3 ”欢迎 界面 


单 击 【 接 受 】 按 钮 ， 打 开 手 机 模拟 器 窗口 ， 在 【输入 网 站 】 文 本 框 中 输入 需要 查看 网 页 效 
果 的 地 址 即 可 ， 如 图 19-4 所 示 。 

例如 ， 这 里 直接 单 击 【当当 网 】 图 标 ， 即 可 查看 当当 网 在 该 移动 设备 模拟 器 中 的 效果 ， 如 
图 19-5 所 示 。 


办 operaMo. - 口 x @@opesMo. - 口 x 


CT Gr 
”… 新 人 PF 


下 载 手机 当当 四 


本 - 


LG Opti 480x80! ppt 21t [gs |50% ~ LG Opti 480x80 Ppl: 216 Ds 50% ~ 
图 19-4 手机 模拟 器 窗口 图 19-5 查看 预览 效果 


Opera Mobile Emulator 不 仅 可 以 查看 移动 网 页 的 效果 ， 还 可 以 任意 调整 窗口 的 大 小 ， 从 而 
查看 不 同 屏幕 尺寸 的 效果 , 这 点 也 是 Opera Mobile Emulator 与 其 他 移动 设备 模拟 器 相 比 最 大 的 


优势 。 


EE 
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19.2.2 jQuery Mobile 的 安装 

想 要 开发 jQuery Mobile 网 页 ， 必 须要 引用 JavaScript 函数 库 (.js) 、CSS 样式 表 和 配套 的 
jQuery 函数 库 文件 。 常 见 的 引用 方法 有 以 下 两 种 : 

1. 直接 引用 jQuery Mobile 库 文件 


从 jQuery Mobile 的 官网 下 载 该 库 文件 (网 址 是 http://jquerymobile.com/download/) ， 如 图 
19-6 所 示 。 


文件 ”将 有 6 二 看 NV) 收 草坪 (A) 工具 Mm 和 部 (rD 


Latest stable version 
1.4.5 
ZIP file 


If you want to host the fles yourself you can download a zip of all the fles 


Zp Fie: Rey mobie1 和 5 而 (avaSaipt CSS, and mages) 


jQuery CDN promasd ty MaxCON 


图 19-6 下 载 jQuery Mobile 库 文件 


下 载 完成 即 可 解压 ， 将 解压 后 的 文件 放 入 jquery 文件 夹 中 ,然后 直接 引用 文件 即 可 ,代码 
如 下 : 


<head> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 

<link rel="stylesheet" href="jquery\jquery.mobile-1.4.5.css"> 

<script src="jquery\jquery.js"></script> 

<script src="jquery\jquery.mobile-1.4.5.js"></script> 

</head> 

注意 : 将 下 载 的 文件 解压 到 和 网 页 位 于 同一 目录 下 ， 否 则 会 因 无 法 引用 而 报错 。 

细心 的 读者 会 发 现 ， 在 <scripf> 标 签 中 没有 插入 type="text/javascript"， 这 是 什么 原因 呢 ? 
因为 所 有 的 浏览 器 中 HIMLS 的 默认 脚本 语言 就 是 JavaScript, 所 以 在 HIML5 中 已 经 不 再 需要 
该 属性 。 

2. 从 CDN 中 加 载 jQuery Mobile 

CDN 的 全 称 是 Content Delivery Network， 即 内 容 分 发 网 络 。 其 基本 思路 是 尽 可 能 避 开 互 
联网 上 有 可 能 影响 数据 传输 速度 和 稳定 性 的 瓶颈 和 环节 ， 使 内 容 传输 得 更 快 、 更 稳定 。 

使 用 CDN 加 载 jQuery Mobile, 用 户 不 需要 在 电脑 上 安装 任何 东西 。 用 户 仅仅 需要 在 网 页 
中 加 载 层 琶 样 式 (css) 和 JavaScript 库 (js) 就 能 够 使 用 jQuery Mobile。 

用 户 可 以 从 jQuery Mobile 官网 中 查找 引用 路 径 ,网址 是 http://jquerymobile.com/download/， 
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进入 该 网 站 后 ， 找 到 jQuery Mobile 的 引用 链接 ， 然 后 将 其 复制 后 添加 到 HTML 文件 <head> 标 
记 中 即 可 ， 如 图 19-7 所 示 。 


亲本 PPVRenmobiecamaoad p-e ® 
Dowrlcad [juery Mobie 
HN mA EEV) ER IAN Hm0l 


Uncompressed struclure without a theme. jquery mobile 1.4 5 css (useful for theme developmenl) 
Minified and Gzipped siruclure without a theme iauery movile 1.4 5 min css (to be used with custom theme and icon 
C3S, ready to deploy) 


Copy-and-Paste snippet for JOuery CDN hosted fles: 


1 | <link re 
2 | «script src="http:/, 


3 | «script srcr 


Google CDN 


复制 选中 的 代码 到 #TWL 文 件 中 


图 19-7 下 载 jQuery Mobile 库 文件 


将 代码 复制 到 <head> 标 记 块 内 ， 代 码 如 下 所 示 。 


<head> 
<!-- meta 使 用 viewport 以 确保 页 面 可 自由 缩放 --> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<!-- 引入 jQuery Mobile 样式 --> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<!-- 引入 jQuery 库 --> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<!-- 引入 jQuery Mobile 库 --> 
<script 
src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></scri 
pt> 
</head> 


注意 : 由 于 jQuery Mobile 函数 库 仍然 在 开发 中 ， 因 此 引用 的 链接 中 的 版 本 号 可 能 会 与 本 
书 不 同 ， 请 使 用 官方 提供 的 最 新 版 本 ， 只 要 按照 上 述 方法 将 代码 复制 下 来 引用 即 可 。 


19.3 jQuery Mobile 网 页 的 架构 


jQuery Mobile 网 页 是 由 header、content 与 footer 3 个 区 域 组 成 的 架构 ， 利 用 <div> 标 记 加 
上 HTMLS5 自 定 义 属性 data-* 来 定义 移动 设备 网 页 组 件 样式 ， 最 基本 的 属性 data-role 可 以 用 来 
定义 移动 设备 的 页 面 架 构 ， 语 法 格式 如 下 : 
<div data-role="page"> 
<!- 开 始 一 个 page--> 
<div data-role="header"> 


<h1> 这 个 是 标题 </h1> 
</div> 
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<div data-role="main" class="ui-content"> 
<p> 这 里 是 内 容 </p> 
</div> 
<div data-role="footer"> 
<h1> 底 部 文本 </h1> 
</div> 
</div> 


在 模拟 器 中 的 预览 效果 如 图 19-8 所 示 。 


“TOM 二 GU 
datarrole [cecee 
"header 这 个 是 标题 
data-role 
="main" 这 时 是 内 春 __data-role 

5 ="page" 
data-role 大 孝文 本 
="footer” 
可 Di- 


HTC Evo : 540x766 PPI:256 Ds 50% 
图 19-8 程序 预览 效果 
从 结果 可 以 看 出 ，jQuery Mobile 网 页 以 页 (page) 为 单位 ， 一 个 HTML 页 面 可 以 放 一 个 
页 面 ， 也 可 以 放 多 个 页 面 ， 只 是 浏览 器 每 次 只 会 显示 一 页 。 如 果 有 多 个 页 面 ， 需 要 在 页 面 中 添 
加 超 链 接 ， 从 而 实现 多 个 页 面 的 切换 。 
jQuery Mobile 网 页 架构 的 具体 含义 如 下 : 


(1) data-role="page" 是 在 浏览 器 中 显示 的 页 面 。 

(2) data-role="header" 是 在 页 面 顶部 创建 的 工具 条 ， 通 常用 于 标题 或 者 搜索 按钮 。 
(3) data-role="main" 定义 了 页 面 的 内 容 ， 比 如 文本 、 图 片 、 表 单 、 按 钮 等 。 

(4) "ui-content" 类 用 于 在 页 面 添加 内 边 距 和 外 边 距 。 

(5) data-role="footer" 用 于 创建 页 面 底部 工具 条 。 


19.4 使 用 UI 组 件 


jQuery Mobile 提供 很 多 可 视 化 的 UI 组 件 ， 只 要 套用 之 后 ， 就 可 以 生成 绚丽 并 且 适 合 移动 
设备 使 用 的 组 件 。jQuery Mobile 中 各 种 可 视 化 的 UI 组 件 与 HIMLS 标记 大 同 小 异 。 下 面 介 绍 
常用 组 件 的 用 法 。 

在 jQuery Mobile 中 ， 经 常 使 用 的 表单 控件 如 下 : 
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1. 文本 输入 框 


文本 输入 框 的 语法 规则 如 下 : 


<input type="text" name="fname" id="fname" value=" "> 


其 中 ，value 属性 用 来 设置 文本 框 中 显示 的 内 容 ， 也 可 以 使 用 placeholder 来 指定 一 个 简短 
的 描述 ， 用 来 描述 输入 内 容 的 含义 。 


【 例 19.1】 《实例 文件 : chl9\19.1.html) 
<!DOCTYPE html> 


<html> 
<head> 


<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min 


CS 之 
<script 


src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> 


<script 


src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min. 


js"></script> 
</head> 
<body> 


<div data-role="first"> 
<div data-role="header"> 


<h1> 输 入 学 生 信 息 </h1> 


</div> 


<div data-role="main" class="ui-content"> 
<form method="post" action="demo form.php"> 
<div class="ui-field-contain"> 


<label 

<input 

<label 

<input 

<label 

<input 
的 家 庭 住 址 "> 


</div> 


for="fullname"> 姓 名 : </label> 

type="text" name="fullname" id="fullname"> 
for="bday"> 出 生年 月 : </label> 

type="date" name="bday" id="bday"> 

for=" "> 家庭 住址 :</label> 

type="text" name="address" id="address" placeholder=" 输 入 您 


<input type="submit" data-inline="true" value=" 提 交 "> 


</form> 
</div> 
</div> 
</body> 
</html> 


模拟 器 中 的 预览 效果 如 图 19-9 所 示 。 单 击 【 入 库 日 期 】 文 本 框 时 ， 会 自动 打开 日 期 选择 
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器 ， 用 户 直 接 选择 相应 的 日 期 即 可 ， 如 图 19-10 所 示 。 


CopeaMobie-tloopims30 一口 x 人 open Mobie -16 Optimos 30 
cD WE ENINGNE 
fleV/localhosVD:/ 本 书 :去 症 sccee  ] 
输入 学 生 信息 I 到 + 月 富 = 
一 二 三 四 五 六 日 
姓名 和 
8 9 1011121314 
出 生年 月 : 15 16 17 18 19 20 21 
二 2223242525 殉 zz 中 
。 ,| 4 3 
EEE 29 30 3 
输入 您 的 家 庭 住址 
提交 提交 
LG Optimus 30 480x679 PPE 215 Bs 100% » ILG Optimus 30 ‘4380x679 PPE 216 G>] 100% ~ 
图 19-9 程序 预览 效果 图 19-10 日 期 选择 器 


2. 文本 域 
使 用 <textarea> 可 以 实现 多 行文 本 输入 效果 。 


【 例 19.2】〔 实 例文 件 ，ch19\19.2.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script 
src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></scri 
pt> 
</head> 
<body> 
<div data-role="first"> 
<div data-role="header"> 
<h1> 文 本 框 </h1> 
</div> 
<div data-role="main" class="ui-content"> 
<form> 
<div class="ui-field-contain"> 
<label for="info"> 您 最 喜欢 的 一 句 名 言 :</Labe1> 
<textarea name="addinfo" id="info"></textarea> 
</div> 
<input type="submit" data-inline="true" value=" 提 交 "> 
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</form> 
</div> 
</div> 
</body> 
</html> 


在 模拟 器 中 的 预览 效果 如 图 19-11 所 示 。 输 入 多 行内 容 时 ， 文 本 框 会 根据 输入 的 内 容 自 动 
调整 文本 框 的 高 度 ， 如 图 19-12 所 示 。 


© Opera Mabie LG Optimus 30 x 


filew/localhosuD; 本 + 记 首 6o0ale  ]】 


多 行文 本 域 


Go 
多 行文 本 寺 

ee 你 最 喜欢 的 一 句 名 言 : 

es dele 办 性 的 时 间 ,如 果 能 敏捷 地 加 以 利 

用 ， 可 成 为 完整 的 时 间 ， 所 谐 " 积 士 

成 山 "是 也 ， 失 去 一 日 其 易 ， 谷 得 回 


已 无 束 。 
提交 


图 19-11 程序 预览 效果 


3. 搜索 输入 框 


提交 


hoopimaa0 


pri05 PP 216 P100% ~ 


图 19-12 选择 日 期 
HTML5 中 新 增 的 type="search" 类 型 为 搜索 输入 框 ， 为 输入 搜索 定义 文本 字段 。 
搜索 输入 框 的 语法 规则 如 下 : 


<input type="search" name="search" id="search" placeholder=" 搜 索 内 容 "> 


搜索 输入 框 的 效果 如 图 19-13 所 示 。 
Q 


图 19-13 ”搜索 输入 框 
4. 范围 滑动 条 


使 用 <input type="range"> 控 件 ， 即 可 创建 范围 


滑动 条 ， 语 法 格式 如 下 : 


<input type="range" name="points" id="points" value="50" min="0" max="100" 
data-show-value="true"> 


其 中 ，max 属性 规定 允许 的 最 大 值 ，min 属性 规定 允许 的 最 小 值 ，step 属性 规定 合法 的 数 
字 间 隔 ; value 属性 规定 默认 值 ，data-show-value 属性 规定 是 否 在 按钮 上 显示 进度 的 值 ， 如 果 设 


置 为 tue， 就 表示 显示 进度 的 值 ， 如果 设置 为 false， 就 表示 不 显示 进度 的 值 。 
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【 例 19.3】 实 例文 件 ，ch19\19.3.html) 


<!DOCTYPE html> 

<html> 

<head> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 

<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 

<script 
src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></scri 
pt> 

</head> 

<body> 

<div data-role="first"> 

<div data-role="header"> 


<h1> 范 围 滑动 条 </h1> 

</div> 

<div data-role="main" class="ui-content"> 
<form> 


<label for="points"> 目 前 项 目的 进度 :</1label> 
<input type="range" name="points" id="points" value="50" min="0" 
max="100" data-show-value="true"> 
<input type="submit" data-inline="true" value=" 提 交 "> 
</form> 
</div> 
</div> 
</body> 
</html> 


在 模拟 器 中 的 预览 效果 如 图 19-14 所 示 。 用 户 可 以 拖 动 滑 块 选择 需要 的 值 ， 也 可 以 通过 加 
减 按钮 精确 选择 进度 的 值 。 


@ opera Mobile -t6 


filelocalhosy! 识 着 5o08le ] 


范围 滑动 条 
目前 项 目的 进度 
68 此 16s) 

人 
提交 


已 团 - 
eps me ee EE 


图 19-14 程序 预览 效果 


使 用 data-popup-enabled 属性 可 以 设置 小 弹 窗 效果 ， 代 码 如 下 : 


使 用 jQuery Mobile 设计 移动 页 面 第 19 章 


<input type="range" name="points" id="points" value="50" min="0" max="100" 
data-popup-enabled="true"> 


添加 后 的 效果 如 图 19-15 所 示 。 


图 19-15 进度 值 显示 效果 
使 用 data-highlight 属性 可 以 亮度 显示 滑动 条 的 值 ， 代 码 如 下 : 


<input type="range" name="points" id="points" value="50" min="0" max="100" 
data-highlight="true"> 


添加 后 的 效果 如 图 19-16 所 示 。 


图 19-16 高 亮度 显示 进度 值 效 果 


5. 表单 按钮 

表单 按钮 分 为 三 种 : 普通 按钮 、 提 交 按 钮 和 取消 按钮 。 只 需要 在 type 属性 中 设置 表单 的 类 
型 即 可 ， 代 码 如 下 : 

<input type="submit" value=" 提 交 按 钮 "> 

<input type="reset" value=" 取 消 按钮 "> 

<input type="button" value=" 普 通 按钮 "> 

在 模拟 器 中 的 预览 效果 如 图 19-17 所 示 。 


提交 按钮 
取消 按钮 


普通 按钮 


图 19-17 表单 按钮 预览 效果 


当 用 户 在 有 限 数量 的 选择 中 仅 选 取 一 个 选项 时 ， 经 常用 到 表单 中 的 单 选 按钮 。 可 以 通过 
type="radio" 来 创建 一 系列 的 单 选 按钮 ， 代 码 如 下 : 
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<fieldset data-role="controlgroup"> 


<legend> 请 选择 您 的 年 级 : </legend> 


<label 
<input 
<label 
<input 
<label 
<input 


for="one"> 一 年 级 </1abe1> 


type="radio" name="grade" id="one" value="one"> 


for="two"> 二 年 级 </1label> 


type="radio" name="grade" id="two" value="two"> 


for="three"> 三 年 级 </1abel> 


type="radio" name="grade" id=" three" value=" three"> 
</fieldset> 


在 模拟 器 中 的 预览 效果 如 图 19-18 所 示 。 


请 选择 您 的 年 级 : 


Io 


图 19-18 单 选 按钮 


提示 : <fieldset> 标 记 用 来 创建 按钮 组 , 组 内 各 个 组 件 保持 自己 的 功能 。 在 <fieldset> 标 记 内 
添加 data-role="controlgroup", 这 样 这 些 单 选 按 钮 样式 统一 , 看 起 来 像 一 个 组 合 。 其 中 , <legend> 
标签 用 来 定义 按钮 组 的 标题 。 


6. 复 选 框 


当 用 户 在 有 限 数量 的 选择 中 选取 一 个 或 多 个 选项 时 ， 需 要 使 用 复 选 框 ， 代 码 如 下 : 


<fieldset data-role="controlgroup"> 


<legend> 请 选择 您 喜爱 的 季节 : </legend> 


<label 
<input 
<label 
<input 
<label 
<input 
<label 
<input 


for="spring"> 春 天 </label> 
type="checkbox" name="season" 
for="summer"> 夏 天 </label> 
type="checkbox" name="season" 
for="fall"> 秋 天 </1label> 
type="checkbox" name="season" 
for="winter"> 冬 天 </label> 
type="checkbox" name="season" 


</fieldset> 


在 模拟 器 中 的 预览 效果 如 图 19-19 所 示 。 


id="spring" value="spring"> 
id="summer" value="summer"> 
id="fall" value="fall"> 


id="winter" value="winter"> 


请 选择 您 宫 妥 的 季节 : 
春天 

夏天 
加 秋天 

冬天 


19-19 ” 复 选 框 


使 用 jQuery Mobile 设计 移动 页 面 第 19 齐 


6. 选择 菜单 
使 用 <select> 标 签 可 以 创建 带 有 若干 选项 的 下 拉 列 表 。<select> 标 签 内 的 <option> 属 性 定义 
了 列表 中 的 可 用 选项 ， 代 码 如 下 : 


<fieldset data-role="fieldcontain"> 
<label for="day"> 选 择 值 日 时 间 : </label> 
<select name="day" id="day"> 
<option value="mon"> 星 期 一 </option> 


<option tue"> 星 期 二 </option> 
<option wed"> 星 期 三 </option> 
<option thu"> 星 期 四 </option> 
<option fri"> 星 期 五 </option> 
<option sat"> 星 期 六 </option> 
<option value="sun"> 星 期 日 </option> 
</select> 
</fieldset> 


在 模拟 器 中 的 预览 效果 如 图 19-20 所 示 。 


选择 值 日 时 间 : 星期 一 


Cm 


图 19-20 选择 菜单 


如 果菜 单 中 的 选项 还 需要 再 次 分 组 , 可 以 使 用 <select> 内 的 <optgroup> 标 签 , 添加 后 的 代码 
如 下 : 


<fieldset data-role="fieldcontain"> 

<label for="day"> 选 择 值 日 时 间 : </label> 

<select name="day" id="day"> 

<optgroup label=" 工 作 日 "> 
<option value="mon"> 星 期 一 </option> 
<option value="tue"> 星 期 二 </option> 
<option value="wed"> 星 期 三 </option> 
<option value="thu"> 星 期 四 </option> 
<option value="fri"> 星 期 五 </option> 

</optgroup> 

<optgroup label=" 休 息 日 "> 
<option value="sat"> 星 期 六 </option> 
<option value="sun"> 星 期 日 </option> 
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</optgroup> 
</select> 
</fieldset> 


在 模拟 器 中 的 预览 效果 如 图 19-21 所 示 。 


选择 值 日 时 间 : 工作 日 


星期 六 


图 19-21 菜单 选项 分 组 后 的 效果 
如 果 想 选择 菜单 中 的 多 个 选项 ， 就 需要 设置 <select> 标 签 的 multiple 属性 ， 代 码 如 下 : 
<select name="day" id="day" multiple data-native-menu="false"> 
例如 ， 把 上 面 的 代码 修改 如 下 : 


<fieldset data-role="fieldcontain"> 
<label for="day"> 选 择 值 日 时 间 : </label> 
<select name="day" id="day" multiple data-native-menu="false"> 
<optgroup label=" 工 作 日 "> 
<option value="mon"> 星 期 一 </option> 
<option value="tue"> 星 期 二 </option> 
<option value="wed"> 星 期 三 </option> 
<option value="thu"> 星 期 四 </option> 
<option value="fri"> 星 期 五 </option> 
</optgroup> 
<optgroup label=" 休 息 日 "> 
<option value="sat"> 星 期 六 </option> 
<option value="sun"> 星 期 日 </option> 
</optgroup> 
</select> 
</fieldset> 


在 模拟 器 中 预览 ， 选 择 菜单 时 的 效果 如 图 19-22 所 示 。 选 择 完成 后 ， 即 可 看 到 多 个 菜单 选 
项 被 选择 ， 如 图 19-23 所 示 。 
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人 选择 多 个 值 日 时 间 : 


星期 五 选择 多 个 信 日 时间 


导出 一 ,性 期 三, 呈 期 六 :@ 


a 
g 


图 19-22 厦门 站 多 个 菜单 选项 图 19-23 多 个 菜单 选项 被 选择 后 的 效果 
8. 翻转 波动 开关 
设置 <input type="checkbox"> 标 签 的 data-role 为 "flipswitch" 时 ， 可 以 创建 翻转 波动 开关 ， 
代码 如 下 : 
<form> 
<label for="switch"> 切 换 开 关 : </label> 
<input type="checkbox" data-role="flipswitch" name="switch" 


id="switch"> 
</form> 


在 模拟 器 中 的 预览 效果 如 图 19-24 所 示 。 
同时 ， 用 户 还 可 以 使 用 "checked" 属 性 来 设置 默认 的 选项 ， 代 码 如 下 : 


<input type="checkbox" data-role="flipswitch" name="switch" id="switch" 
checked> 


修改 后 的 预览 效果 如 图 19-25 所 示 。 
默认 情况 下 ， 开 关切 换 的 文本 为 "On" 和 "Off'。 可 以 使 用 data-on-text 和 data-off-text 属性 
来 修改 ， 代 码 如 下 : 


<input type="checkbox" data-role="flipswitch" name="switch" id="switch" 
data-on-text=" 打 开 " data-off-text=" 关 闭 "> 


修改 后 的 预览 效果 如 图 19-26 所 示 。 


切换 开关 切换 开关 切换 开关 : 


or ED 天 


图 19-24 开关 默认 效果 ”图 19-25 ”修改 默认 选项 后 的 效果 图 19-26 ”修改 切换 开关 文本 后 的 效果 
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19.5 “导航 条 


导航 条 通常 位 于 页 面 的 头 部 或 尾部 ， 主 要 作用 是 便于 用 户 快速 访问 需要 的 页 面 。 本 节 将 重 


点 学 习 导航 条 的 使 用 方法 和 技巧 。 
在 jQuery Mobile 中 ， 使 用 data-role="navbar" 属性 来 定义 导航 栏 。 需 要 特别 注意 的 是 ， 导 


航 栏 中 的 链接 将 自动 变 成 按钮 ， 不 需要 使 用 data-role="button" 属 性 。 
例如 : 


<div data-role="header"> 
<h1> 鸿 名 网 购 平台 </h1> 
<div data-role="navbar"> 
<ul> 
<1i><a href="#"> 主 页 </a></1i> 
<1i><a href="#"> 团 购 </a></1i> 
<1i><a href="#"> 搜 索 商品 </a></1i> 
</ul> 
</div> 
</div> 


在 模拟 器 中 的 预览 效果 如 图 19-27 所 示 。 


图 19-27 程序 预览 效果 


通过 前 面 章节 的 学 习 ， 用 户 还 可 以 为 导航 添加 按钮 图 标 。 例 如 ， 将 以 上 代码 修改 如 下 : 


<div data-role="header"> 
<h1> 鸿 名 网 购 平台 </h1> 
<div data-role="navbar"> 
<ul> 
<li><a href="#" data-icon="home"> 主 页 </a></1i> 
<li><a href="#" data-icon="arrow-d"> 团 购 </a></1i> 
<li><a href="#" data-icon="search"> 搜 索 商 品 </a></1i> 


</ul> 
</div> 
</div> 
在 模拟 器 中 的 预览 效果 如 图 19-28 所 示 。 
鸿 鲍 网 购 平台 
Q © 9 
在 搂 案 二 品 


图 19-28 程序 预览 效果 


使 用 jQuery Mobile 设计 移动 页 面 第 19 齐 


细心 的 读者 会 发 现 ， 导 航 按钮 的 图 标 默认 位 置 是 位 于 文字 的 上 方 ， 这 个 普通 的 按钮 图 片 是 
不 一 样 的 。 如 果 需 要 修改 导航 按钮 图 标的 位 置 ， 可 以 通过 设置 data-iconpos 属性 来 指定 位 置 ， 
包括 left 〈( 左 侧 ) 、right( 右 侧 ) 、bottom (底部 )。 

例如 ， 修 改 导航 按钮 图 标的 位 置 为 文本 的 左 侧 ， 代 码 如 下 : 


<div data-role="header"> 
<h1> 鸿 秽 网 购 平台 </h1> 
<div data-role="navbar" data-iconpos="left"> 
<ul> 
<li><a href="#" data-icon="home" > 主页 </a></1i> 
<1i><a href="#" data-icon="arrow-d" > 团购 </a></1i> 
<1i><a href="#" data-icon="search"> 搜 索 商品 </a></1i> 
</ul> 
</div> 
</div> 


在 模拟 器 中 的 预览 效果 如 图 19-29 所 示 。 


鸿 龄 网 购 平台 
主页 [#] 团购 © 搜索 商品 


© 


图 19-29 程序 预览 效果 
注意 : 和 设置 普通 按钮 图 标 位 置 不 同 的 是 ， 这 里 data-iconpos="left" 属 性 只 能 添加 到 <div> 
标签 中 ， 而 不 能 添加 到 <li> 标 签 中 ， 和 否则 是 无 效 的， 读者 可 以 自行 检测 。 
默认 情况 下 ， 当 单 击 导航 按钮 时 ， 按 钮 的 样式 会 发 生变 换 。 例 如 ， 这 里 单 击 【搜索 商品 】 
导航 按钮 ， 发 现 按钮 的 底 纹 颜色 变 成 了 蓝 色 ， 如 图 19-30 所 示 。 


鸿 网 网 购 平台 
© 网 Q 搜索 隐 品 


© 
各 


图 19-30 “导航 按钮 的 样式 变化 
如 果 用 户 想 取消 上 面 的 样式 变化 ， 添 加 class="ui-btn-active" 属 性 即 可 ， 例 如 : 


<li><a href="#anylink" class="ui-btn-active"> 首 页 </a></1i> 
修改 完成 后 ， 再 次 单 击 【 主 页 】 导 航 按钮 时 ， 样 式 不 会 发 生变 化 。 


对 于 多 个 页 面 的 情况 ， 往 往 用 户 展示 哪个 页 面 ， 对 应 导航 按钮 会 处 于 被 选中 状态 ， 下 面 通 
过 一 个 案例 来 讲解 。 


【 例 19.4】〔 实 例文 件 ，ch19\19.4.html) 


<!DOCTYPE html> 
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<html> 

<head> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 

<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 

<script 
src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></scri 
pt> 

</head> 

<body> 

<div data-role="page" id="first"> 

<div data-role="header"> 


<h1> 鸿 鸟 购物 平台 </h1> 
<div data-role="navbar"> 
<ul> 
<li><a href="#" class="ui-btn-active ui-state-persist"> 主 页 
</a></1i> 
<1i><a href="#second"> 团 购 </a></1i> 
<1i><a href="#"> 搜 索 商品 </a></1i> 
</ul> 
</div> 
</div> 
<div data-role="content" class="content"> 
<p> 这 里 是 首页 显示 的 内 容 </p> 
</div> 
<div data-role="footer"> 
<h1> 首 页 </h1> 
</div> 
</div> 


<div data-role="page" id="second"> 
<div data-role="header"> 


<h1> 鸿 秽 购 物 平台 </h1> 
<div data-role="navbar"> 
<ul> 


<1i><a href="#first"> 主 页 </a></1i> 
<1i><a href="#" class="ui-btn-active ui-state-persist"> 团 购 
</a></1i> 
<1i><a href="#"> 搜 索 商 品 </a></1i> 
</ul> 
</div> 
</div> 
<div data-role="content" class="content"> 
<p> 这 里 是 团购 显示 的 内 容 </p> 
</div> 
<div data-role="footer"> 
<h1> 团 购 页 面 </h1> 
</div> 
</div> 
</body> 
</html> 
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在 模拟 器 中 的 预览 效果 如 图 19-31 所 示 。 此 时 默认 显示 首页 的 内 容 ，【 主 页 】 导 航 按钮 处 
于 选中 状态 。 切 换 到 团购 页 面 后 ，【 团 购 】 导 航 按钮 处 于 选中 状态 ， 如 图 19-32 所 示 。 


鸿 忽 购 物 平 台 鸿 鲍 购物 平台 
主页 团购 搜索 商品 主页 团购 搜索 商品 
这 里 是 首页 显示 的 内 容 这 里 是 团购 显示 的 内 容 
首页 团购 页 面 
图 19-31 程序 预览 效果 图 19-32 ” 【团购 】 导 航 按钮 处 于 选中 状态 


19.6 ”使 用 jQuery Mobile 主题 


用 户 在 设计 移动 网 站 时 ， 往 往 需要 配置 背景 颜色 、 导 航 颜色 、 布 局 颜色 等 ， 这 些 工 作 是 非 
常 耗费 时 间 的 。 为 此 , jQuery Mobile 提供 了 两 种 不 同 的 主题 样式 , 每 种 主题 颜色 的 按钮 、 导 航 、 
内 容 等 颜色 都 是 配置 好 的 ， 效 果 也 不 相同 。 

这 两 种 主题 分 别 为 a 和 b， 可 以 通过 设置 data-theme 属性 来 引用 ， 代 码 如 下 : 

<div data-role="page" id="first" data-theme="a"> 

<div data-role="page" id="first" data-theme="b"> 

1. 主题 a 

页 面 为 灰色 背景 、 黑 色 文字 头 部 与 底部 均 为 灰色 背景 、 黑 色 文字 ;按钮 为 灰色 背景 、 黑 
色 文字 ; 激活 的 按钮 和 链接 为 白色 文本 、 蓝 色 背 景 ，input 输入 框 中 placeholder 属性 值 为 浅 灰 
色 ，value 值 为 黑色 。 

下 面 通过 一 个 案例 来 讲解 主题 a 的 样式 效果 。 


【 例 19.5】“〔 实 例文 件 ，ch19\19.5.html) 


<!DOCTYPE html> 

<html> 

<head> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 

<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 

<script 
src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></scri 
pt> 

</head> 
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<body> 
<div data-role="page" id="first" data-theme="a"> 
<div data-role="header"> 
<h1> 古 诗 鉴 赏 </h1> 
</div> 
<div data-role="content " class="content"> 
<p> 秋 风 起 分 白云 飞 ， 草 木 黄 落 今 雁 南 归 。 兰 有 秀 兮 菊 有 芳 ， 怀 佳人 分 不 能 忘 。 泛 楼 船 分 济 汾 
河 ， 横 中 流 分 扬 素 波 。</p> 
<a href="#"> 秋 风 辞 </a> 
<a href="#" class="ui-btn"> 更 多 古诗 </a> 
<p> 唐 诗 :</p> 
<ul data-rol 
<li><a hre 
<li><a href= 
</ul> 
<label for="fullname"> 请 输入 喜欢 诗 的 名 字 :</1abel1> 
<input type="text" name="fullname" id="fullname" placeholder=" 诗 词 名 


="1istview" data-autodividers="true" data-inset="true"> 
#"> 将 进 酒 </a></1i> 
#"> 春 望 </a></1i> 


称 . ."> 
<label for="switch"> 切 换 开关 :</label> 
<select name="switch" id="switch" data-role="slider"> 
<option value="on">On</option> 
<option value="off" selected>0ff</option> 
</select> 
</div> 
<div data-role="footer"> 
<h1> 经 典 诗歌 </h1> 
</div> 
</div> 
</body> 
</html> 


主题 a 的 样式 效果 如 图 19-33 所 示 。 
古诗 鉴赏 


秋风 起 人 白云 飞 ， 草木 菌落 全 秦 南 归 。 兰 有 秀全 殴 有 芒 ， 怀 佳人 
A 汉 楼 船 全 济 汾 河 ， 横 中 流 全 扬 案 波 。 


更 多 古诗 


图 19-33 ”主题 a 样式 效果 


使 用 jQuery Mobile 设计 移动 页 面 第 19 齐 


2. 主题 b 

页 面 为 黑色 背景 、 白 色 文 字 ; 头 部 与 底部 均 为 黑色 背景 、 白 色 文 字 ; 按钮 为 白色 文字 、 木 
炭 背 景 ; 激活 的 按钮 和 链接 为 白色 文本 、 蓝 色 背 景 ， input 输入 框 中 placeholder 属性 值 为 浅 灰 
色 、value 值 为 白色 。 

为 了 对 比 主 题 a 的 样式 效果 ， 将 上 面 案例 的 中 代码 : 


<div data-role="page" id="first" data-theme="a"> 


修改 如 下 : 


<div data-role="page" id="first" data-theme="a"> 


主题 b 的 样式 效果 如 图 19-34 所 示 。 


菊 有 芳 , 怀 佳人 


请 输入 喜欢 诗 的 名 字 : 


切换 开关 : 


Off 


图 19-34 ”主题 b 样 式 效果 


主题 样式 a 和 b 不 仅 可 以 应 用 到 页 面 ， 也 可 以 单独 应 用 到 页 面 的 头 部 、 内 容 、 底 部 、 导 航 
条 、 按 钮 、 面 板 、 列 表 、 表 单 等 元 素 上 。 
例如 ， 将 主题 样式 b 添加 到 页 面 的 头 部 和 底部 ， 代 码 如 下 : 


<div data-role="header" data-theme="b"></div> 
<div data-role="footer" data-theme="b"></div> 


将 主题 样式 b 添加 到 对 话 框 的 头 部 和 底部 ， 代 码 如 下 : 
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<div data-role="page" data-dialog="true" id="second"> 
<div data-role="header" data-theme="b"></div> 
<div data-role="footer" data-theme="b"></div> 
</div> 


将 主题 样式 b 添 加 到 按钮 上 时 ,需要 使 用 class="ui-btn- alb "来 设置 按钮 颜色 为 灰色 或 黑色 。 
例如 ， 将 样式 b 的 样式 应 用 到 按钮 上 ， 代 码 如 下 : 


<a href="#" class="ui-btn"> 灰 色 按钮 (默认 ) </a> 
<a href="#" class="ui-btn ui-btn-b"> 黑 色 按钮 </a> 


预览 效果 如 图 19-35 所 示 。 


灰色 按钮 (默认 ) 


黑色 按钮 


图 19-35 ”按钮 添加 主题 后 的 效果 


在 弹 窗 上 应 用 主题 样式 的 代码 如 下 : 
<div data-role="popup" id="myPopup" data-theme="b"> 
在 头 部 和 底部 的 按钮 上 也 可 以 添加 主题 样式 ， 例 如 : 


<div data-role="header"> 
<a href="#" class="ui-btn ui-btn-b"> 主 页 </a> 


<h1> 古 诗 欣 赏 </h1> 
<a href="#" class="ui-btn"> 搜 索 </a> 
</div> 


<div data-role="footer"> 
<a href="#" class="ui-btn ui-btn-b"> 上 传 古 诗 图 文 </a> 
<a href="#" class="ui-btn"> 名 句 欣 赏 鉴别 </a> 
<a href="#" class="ui-btn ui-btn-b"> 联 系 我 们 </a> 
</div> 


预览 效果 如 图 19-36 所 示 。 


清明 时 节 十 纷纷， 路 上 行人 欲 断 碧 。 借 辣 酒家 何 处 有 ? 牧童 北 指 可 花 
村 。 


+ HS | 


图 19-36 头 部 和 底部 的 按钮 添加 主题 后 的 效果 
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19.7 创建 多 页 面 的 jQuery Mobile 网 页 


本 案例 将 使 用 jQuery Mobile 制作 一 个 多 页 面 的 jQuery Mobile 网 页 ， 并 创建 多 个 页 面 .使 
用 不 同 的 id 属性 来 区 分 不 同 的 页 面 。 


【 例 19.6】〔 案 例文 件 : ch19\19.6.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script 
src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></scri 
pt> 
</head> 
<body> 
<div data-role="page" id="first"> 
<div data-role="header"> 
<h1> 古 诗 欣 党 </h1> 
</div> 
<div data-role="main" class="ui-content"> 
<p> 几 回 花 下 坐 吹 第 ， 银 汉 红 墙 入 望 遥 。</P> 
<a href="#second"> 下 一 页 </a> 


</div> 
<div data-role="footer"> 
<h1> 清 代 诗 人 </h1> 
</div> 
</div> 


<div data-role="page" id="second"> 
<div data-role="header"> 
<h1> 古 诗 欣 赏 </h1> 
</div> 
<div data-role="main" class="ui-content"> 
<p> 似 此 星辰 非 昨夜 ， 为 谁 风 露 立 中 宵 。</P> 
<a href="#first"> 上 一 页 </a> 
</div> 
<div data-role="footer"> 
<h1> 清 代 诗 人 </h1> 
</div> 
</div> 
</body> 
</html> 
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在 模拟 器 中 的 预览 效果 如 图 19-37 所 示 。 单 击 【下 一 页 】 超 链接 ， 即 可 进入 第 二 页 ， 如 图 
19-38 所 示 。 单 击 【上 一 页 】 超 链接 ， 即 可 返回 到 第 一 页 中 。 


© opem Mobie -Mc Er 0 o x| © Opere Mobie -ce 加 = 


file://localhosUVCUsers 请 [Google 


file://localhost/C:/User: 请 [Google 


古诗 欣赏 | 古诗 欣赏 
几 回 花 下 坐 吹 第 ， 银 汉 红 墙 入 望 遥 。 似 此 星辰 非 昨夜 ， 为 谁 风 露 立 中 育 。 
下 一 页 村 < 

清 代 诗人 清 代 诗 人 


ts2610 pph26 基 oo | | meeeaD ‘462010 PPh 256 [Bo 100 ~ 


图 19-37 程序 预览 效果 图 19-38 第 二 页 预览 效果 


19.8 制作 对 话 框 效果 


对 话 框 用 于 页 面 信息 显示 或 者 表单 信息 的 输入 。 在 jQuery Mobile 中 ， 通 过 在 链接 中 添加 
如 下 属性 ， 即 可 将 页 面 作为 对 话 框 使 用 : 


data-dialog="true" 


【 例 19.7】 《案例 文件 : ch19\19.7.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script 
src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></scri 
pt> 
</head> 
<body> 
<div data-role="page" id="first"> 
<div data-role="header"> 
<h1> 上 古诗 鉴赏 </h1> 
</div> 
<div data-role="main" class="ui-content"> 


<p> 浩 荡 离 悉 白 日 斜 ， 吟 著 东 指 即 天 涯 。 落 红 不 是 无 情 物 ， 化 作 春 泥 更 护 花 。</p> 
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<a href="#second"> 查 看 详情 </a> 


</div> 
<div data-role="footer"> 
<h1> 清 代 诗 词 </h1> 
</div> 
</div> 


<div data-role="page" data-dialog="true" id="second"> 


<div data-role="header"> 
<h1> 诗 词 鉴 党 </h1> 
</div> 


<div data-role="main" class="ui-content"> 


<p> 这 首 诗 是 《已 亥 杂 诗 》 的 第 五 首 ， 写 诗人 离 京 的 感受 。 虽 然 载 着 “浩荡 离愁 ”， 却 表示 仍 


然 要 为 国 为 民 尽 自己 最 后 一 份 心力 。</p> 


<a href="#first"> 上 一 页 </a> 


</div> 
<div data-role="footer"> 
<h1> 清 代 诗 词 </h1> 
</div> 
</div> 
</body> 
</html> 


在 模拟 器 中 的 预览 效果 如 图 19-39 所 示 。 


如 图 19-40 所 示 。 


地 opem Mobile -He Evo 30 | 


relocathosucyUser 记 芽 000。 


古诗 鉴赏 


浩荡 离 悉 白 日 料 ， 吟 牙 东 指 即 天 涯 。 落 红 | 


不 是 无 情 物 ， 化 作 春泥 更 护 花 。 
查看 详情 


清 代 诗词 


DOB- 
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图 19-39 程序 预览 效果 


单 击 【 查 看 详情 】 超 链接 ， 即 可 打开 一 个 对 话 框 ， 


€ opere Webde He Fro a0 0 x 
file://localhosVCVUsers 请 Google ©] 
诗词 鉴赏 


这 首 诗 是 《 己 玄 杂 诗 》 的 第 五 首 ， 写 
诗人 离 京 的 感受 。 虽然 载 着 "浩荡 离 
愁 ”, 却 表示 仍然 要 为 国 为 民 尽 自己 最 
后 一 份 心力 。 


上 一 页 


清 代 诗 词 


591 PPh256 了 100M “| 


图 19-40 对话 框 预览 效果 


从 结果 可 以 看 出 ， 对 话 框 与 普通 页 面 不 同 ， 它 显示 在 当前 页 面 上 ， 但 又 不 会 填充 完整 的 页 
面 ， 顶 部 日 图 标 用 于 关闭 对 话 框 ， 单 击 【 上 一 页 】 链 接 ， 也 可 以 关闭 对 话 框 。 
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19.9 绚丽 多 彩 的 页 面 切换 效果 
jQuery Mobile 提供 了 各 种 切换 到 下 一 个 页 面 的 效果 ， 主 要 通过 设置 data-transition 属性 来 
完成 ， 语 法 规则 如 下 : 
<a href="#1ink"” data-transition=" 切 换 效 果 "> 切 换 下 一 页 </a> 
其 中 切换 效果 有 很 多 ， 如 表 19.1 所 示 。 
表 19.1 页 面 切换 效果 


页 面 效 果 参 数 含义 
fade 默认 的 切换 效果 ， 淡 入 到 下 一 页 


左 滑动 到 下 一 页 

slidefade 左 滑动 并 淡 入 到 下 一 页 

slideup 
slidedown 下 滑动 到 下 一 页 


tum 转向 下 一 页 


注意 : 在 jQuery Mobile 的 所 有 链接 上 ， 默 认 使 用 淡 入 淡出 的 效果 。 
例如 ， 设 置 页面 从 右 向 左 滑动 到 下 一 页 ， 代 码 如 下 : 


<a href="#second" data-transition="slide"> 切 换 下 一 页 </a> 


上 面 的 所 有 效果 支持 后 退行 为 。 例 如 , 用 户 想 让 页 面 从 左 向 右 滑动 , 可 以 添加 data-direction 
属性 为 "reverse" 值 ， 代 码 如 下 : 


<a href="#second" data-transition="slide" data-direction="reverse"> 切 换 下 
一 页 </a> 


【 例 19.9】〔 案 例文 件 ，ch19\19.8.html) 


<!DOCTYPE html> 

<html> 

<head> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 

<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
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<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script 
src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></scri 
PE 
</head> 
<body> 
<div data-role="page" id="first"> 
<div data-role="header"> 
<h1> 古 诗 欣 赏 </h1> 
</div> 
<div data-role="main" class="ui-content"> 
<p> 老 农家 贫 在 山 住 ， 耕 种 山田 三 四 亩 。</p> 
<! 一 实现 从 右 到 左 切换 到 下 一 页 --> 
<a href="#second" data-transition="slide" > 下 一 页 </a> 
</div> 
<div data-role="footer"> 
<h1> 野 老 歌 </h1> 
</div> 
</div> 
<div data-role="page" id="second"> 
<div data-role="header"> 
<h1> 古 诗 欣 赏 </h1> 
</div> 
<div data-role="main" class="ui-content"> 
<p> 岁 匣 钢 犁 傍 空 室 ， 呼 儿 登 山 收 橡 实 。</p> 
<! 一 实现 从 左 到 右 切 换 到 下 一 页 --> 
<a href="#first" data-transition="slide" data-direction="reverse"> 上 
一 页 </a> 
</div> 
<div data-role="footer"> 
<h1> 野 老 歌 </h1> 
</div> 
</div> 
</body> 
</html> 


在 模拟 器 中 的 预览 效果 如 图 19-41 所 示 。 单 击 【 下 一 页 】 超 链接 ， 即 可 从 右 到 左 滑 动 进 入 
第 二 页 ， 如 图 19-42 所 示 。 单 击 【 上 一 页 】 超 链接 ， 即 可 从 左 到 右 滑动 返回 到 第 一 页 中 。 


@ Opere Mobie - Orton EB x © opers Mabie -Curom - 0 x 
古诗 欣赏 古诗 欣赏 
老农 家 黄 在 山 住 ， 耕 种 山田 三 四 亩 。 岁 暮 钠 犁 傍 空 室 ， 呼 儿 登山 收 橡 实 。 

下 一 页 上 一 页 
野 老 歌 野 老 歌 
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图 19-41 程序 预览 效果 图 19-42 第 二 页 预览 效果 
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19.10 ”大 神 解 惑 


疑问 1 : 如 何 制 作 一 个 弹 窗 效果 ? 

弹 窗 是 一 个 非常 流行 的 对 话 框 , 可 以 覆盖 在 页 面 上 展示 。 弹 窗 可 用 于 显示 一 段 文本 、 图片、 
地 图 或 其 他 内 容 。 创建 一 个 弹 窗 , 需要 使 用 <a> 和 <div> 标 签 。 在 <a> 标 签 上 添加 data-rel="popup" 
属性 ,在 <div> 标 签 上 添加 data-role="popup" 属 性 。 然 后 为 <div> 设 置 id, 设置 <a> 的 href 值 为 <div> 
指定 的 i4， 其 中 <div> 中 的 内 容 为 弹 窗 显 示 的 内 容 ， 代 码 如 下 : 

<a href="#firstpp" data-rel="popup"> 显 示 弹 窗 </a> 

<div data-role="popup" id="firstpp"> 


<p> 这 是 弹出 窗口 显示 的 内 容 </p> 
</div> 


疑问 2 : 如 何 制作 一 个 面板 效果 ? 
在 jQuery Mobile 中 可 以 添加 面板 ， 面 板 会 在 屏幕 上 从 左 到 右 划 出 。 通 过 为 <div> 标 签 添加 
data-role="panel" 属 性 来 创建 面板 。 有 具体 思路 如 下 : 
(1) 通过 <div> 标 签 来 定义 面板 的 内 容 ， 并 定义 id 属性， 例如: 
<div data-role="panel" id="myPanel"> 
<h2> 长 恨 歌 </h2> 


<p> 天 生 丽 质 难 自 弃 ， 一 朝 选 在 君王 侧 。 回 眸 一 笑 百 媚 生 ， 六 宫 粉 贷 无 颜色 。</P> 
</div> 


注意 : 定义 的 面板 内 容 必 须 置 于 头 部 、 内 容 和 底部 组 成 的 页 面 之 前 或 之 后 。 
(2) 要 访问 面板 , 需要 创建 一 个 指向 面板 <div> 的 链接 ，, 单 击 该 链接 即 可 打开 面板 。 例 如 : 


<a href="#myPanel" class="ui-btn ui-btn-inline"> 最 喜欢 的 诗句 </a> 


第 20 章 项 目 实 训 1 
一 一 设计 企业 门户 网 站 


作为 小 型 软件 企业 的 网 站 ， 一 般 规 模 不 是 太 大 ， 通 常 包含 3~5 个 栏目 ， 例 如 产品 、 客 户 和 
联系 我 们 栏目 等 ， 有 的 栏目 甚至 只 包含 一 个 页 面 ， 例 如 “联系 我 们 ”栏目 。 此 类 网 站 通常 都 是 
为 了 展示 公司 形象 而 说 明 一 下 公司 的 业务 范围 和 产品 特色 等 。 一 般 实现 这 样 的 网 站 的 就 是 一 个 
首页 加 上 若干 内 容 。 


20.1 构思 布局 


本 实例 是 模拟 一 个 小 型 软件 公司 的 网 站 ， 其 公司 主要 承接 电信 方面 的 各 种 软件 项 目 。 网 站 
包括 首页 、 产 品 信息 、 客 户 信息 和 联系 我 们 等 栏目 。 在 本 实例 中 ， 红 色 和 白色 配合 使 用 ， 红 色 
部 分 显示 导航 菜单 ， 白 色 部 分 显示 文本 信息 。 在 正 11.0 中 的 浏览 效果 如 图 20-1 所 示 。 


图 20-1 计算 机 网 站 首页 


20.1.1 设计 分 析 


作为 一 个 软件 公司 网 站 首页 ， 其 页 面 应 简单 、 明 了 ， 给 人 以 清晰 的 感觉 。 页 头 部 分 主要 放 
置 导 航 菜单 和 公司 Logo 信息 等 , 其 Logo 可 以 是 一 张 图 片 或 者 文本 信息 等 ; 页 面 主体 分 为 两 个 
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部 分 ， 页 面 主体 左 侧 是 公司 介绍 ， 对 于 公司 介绍 可 以 在 首页 上 概括 性 描述 ; 页 面 主体 右 侧 是 新 
闻 、 产 品 和 客户 信息 等 ， 其 中 产品 和 客户 的 链接 信息 以 列表 形式 对 重要 信息 进行 介绍 ， 也 可 以 
通过 页 面 顶部 导航 菜单 进入 相应 页 面 介绍 。 

对 于 网 站 的 其 他 子 页 面 ， 篇 幅 可 以 比较 短 ， 其 重点 是 介绍 软件 公司 业务 、 联 系 方式 、 产 品 
信息 等 ， 页 面 与 首页 风格 相同 即 可 。 


20.1.2 排版 架构 


从 上 面 的 效果 图 可 以 看 出 ， 页 面 结构 并 不 是 太 复杂 ， 采 用 的 是 上 中 下 结构 ， 页 面 主体 部 分 
又 嵌 套 了 一 个 左右 版 式 结构 ， 其 效果 如 图 20-2 所 示 。 


| 页 头 部 分 


页 面 主体 


| 
| 左 侧 右 侧 
| 列表 | | 列表 


页 脚 部 分 


图 20-2 页 面 总 体 框架 


在 HIML 页 面 中 ,通常 使 用 DIV 层 对 应 上 面 不 同 的 区 域 ， 可 以 是 一 个 DIV 层 对 应 一 个 区 
域 ， 也 可 以 是 多 个 DIV 层 对 应 同一 个 区 域 。 本 实例 的 DIV 代码 如 下 所 示 。 


<div id="container">/* 页 面 布局 容器 */ 

http://stockhtm.finance.qq.com/sstock/ggcx/600132.shtml?pgv ref=fi quot 
e my select<div id="top"> 

</div><!--end top--> 

<div id="header"> 

</div><!--end header--> 

<div id=me>/* 导 航 菜单 */ 

</div> 

<div id="content"> 

<div id="text">/* 页 面 主体 左 侧 内 容 */ 

</div><!--end text-——> 

<div id="column">/* 页 面 主体 右 侧 内 容 */ 

</div><!--end column-——> 

</div><!--end content-——> 

<div id="footer">/* 页 脚 部 分 */ 

</div><!--end footer--> 

</div><!--end container-——> 
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在 上 面 的 代码 中 ，ID 名 称 为 container 的 层 是 整个 页 面 的 布局 容器 ，top、header 和 me 层 
共同 组 成 了 页 头 部 分 。 其 中 ，top 层 用 于 显示 页 面 Logo，header 层 用 于 显示 页 头 文本 信息 ，me 
层 用 于 显示 页 头 导航 菜单 信息 。 页 面 主 体 是 content 层 ， 其 包含 了 两 个 层 ， 即 text 层 和 column 
层 : text 层 是 页 面 主体 左 侧 内 容 ， 显 示 公 司 介绍 信息 ; column 层 是 页 面 主体 右 侧 内 容 ， 显 示 公 
司 常用 的 导航 链接 。footer 层 是 页 脚 部 分 ， 用 于 显示 版 权 信息 和 地 址 信息 。 

在 CSS 文件 中 ， 对 应 container 层 和 content 层 的 CSS 代码 如 下 所 示 。 


#container 
{ 
margin: Opt auto; 
width: 770px; 
position: relative; } 
#content { 
background: transparent url('images/content.gif') repeat-y; 
clear: both; 
margin-top: Spx; 
width: 770px; 
} 
在 上 面 的 代码 中 ，#container 选择 器 定义 了 整个 布局 容器 的 宽度 、 外 边 距 和 定位 方式 。 


#content 选择 器 定义 了 背景 图 片 、 宽 度 和 顶部 边 距 。 
20.2 ”模块 分 割 
当 页 面 整体 架构 完成 后 ， 就 可 以 动手 制作 不 同 的 模块 区 域 了 。 其 制作 流程 采用 自 上 而 下 、 
从 左 到 右 的 顺序 。 完 成 后 ， 再 对 页 面 样式 进行 整体 调整 。 


20.2.1 Logo 与 导航 菜单 

一 般 情 况 下 ，Logo 信息 和 导航 菜单 都 放 在 页 面 项 部 ， 作 为 页 头 部 分 。 其 中 ，Logo 信息 作 
为 公司 标志 ， 通 常 放 在 页 面 的 左上 角 或 右上 角 : 导航 菜单 放 在 页 头 部 分 和 页 面 主体 二 者 之 间 ， 
用 于 链接 其 他 的 页 面 。 在 正 11.0 中 的 浏览 效果 如 图 20-3 所 示 。 


YOUR LOGO COMPANY 


计算 机 网 站 


图 20-3 页 面 Logo 和 导航 菜单 


在 HTML 文件 中 ， 用 于 实现 页 头 部 分 的 HTML 代码 如 下 所 示 。 


<div id="top"> 
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</div><!--end top--> 

<div id="header"> 

<h1> 计 算 机 网 站 </h1> 
</div><!--end header--> 

<div id=me> 

<ul id="menu"> 

<1i><a href="#" class="actual"> 首 页 </a></1i> 
<1i><a href="#" > 产品 </a></1i> 
<1i><a href="#"> 客 户 </a></1i> 
<1i><a href="#"> 联 系 方式 </a></1i> 
</ul> 

</div> 


在 上 面 的 代码 中 ，top 层 用 于 显示 页 面 Logo; header 层 用 于 显示 页 头 的 文本 信息 ， 例 如 公 
司 名 称 ; me 层 用 于 显示 页 头 导航 菜单 。 在 me 层 中 有 一 个 无 序列 表 ， 用 于 制作 导航 菜单 ， 每 个 
选项 都 由 超 链接 组 成 。 

在 CSS 样式 文件 中 ， 对 应 上 面 标记 的 CSS 代码 如 下 所 示 。 


#top{ 

background: transparent url('images/top.jpg') no-repeat; 
height:50px; 

} 

#top pt 

margin:0pt; 

padding:0pt; 

} 

#header{ 
background:transparent url('images/header.jpg') no-repeat; 
height:150px; 
margin-top:5px; 

} 

#menui 

position:absolute; 
top:180px; 

left:15px; 

} 

#header hli{ 

margin:5px Opt Opt S50px; 
padding:0pt; 
font-size:1.7em; 

} 

#header h2{ 

margin:1l0px Opt Opt 90px; 
padding:0pt; 
font-size:1.2em; 
Golor:T9gb(223, 139;139)7 
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ul#menut{ 

margin:0pt; 

} 

#menu 1i{ 
list-style-type:none; 
float:left; 
text-align:center; 
width:104px; 
margin-right:3px; 
font-size:1.05em; 

} 

#menu af 
background:transparent url('images/menu.gif') no-repeat; 
overflow:hidden; 
display:block; 

height:28px; 
padding-top: 3px; 
text-decoration:none; 
twidth:100%; 

font-size:1lem; 
font-family:Verdana, "Geneva CE",1lucida,sans-serif; 
color rg l255725572500)> 

} 

#menu li>a,#menu li>strongt{ 
width:auto; 

} 

#menu a.actualf{ 
background:transparent url('images/menu-actual.gif') no-repeat; 
color:rgb(149, 32, 32); 

} 

#menu a:hovert{ 
color:rgb(149, 32, 32); 


在 上 面 的 代码 中 ，#top 选择 器 定义 了 背景 图 片 和 层 高 ，#beader 定义 了 背景 图 片 、 高 度 和 
顶部 外 边 距 ，#menu 层 定 义 了 层 定位 方式 和 坐标 位 置 。 其 他 选择 器 分 别 定义 了 上 面 三 个 层 中 元 
素 的 显示 样式 ， 例 如 段落 显示 样式 、 标 题 显示 样式 、 超 级 链接 样式 等 。 


20.2.2 左 侧 文本 介绍 


在 页 面 主体 中 ， 其 左 侧 版 式 主要 介绍 公司 相关 信息 。 左 侧 文 本 采用 的 是 左 浮动 并 且 固定 宽 
度 的 版 式 设计 ， 重 点 在 于 调节 宽度 使 不 同 浏览 器 之 间 能 够 效果 一 致 ， 并 且 颜 色 上 配合 Logo 和 
左 侧 的 导航 菜单 ， 使 整个 网 站 和 谐 、 大 气 。 在 正 11.0 中 的 浏览 效果 如 图 20-4 所 示 。 
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欢迎 来 到 我 们 的 网 站 
过 大 公司 于 4908 和 法 有 本 


是 国家 
人 Lt 


国 
家 版 权 局 大 发 的 《软件 著作 权 理 记 证 
书 》。 大 方 的 进步 和 发 展 ， 也 得 到 

大 力 支持 和 关注 ， 获 得 国 


， 并 正式 获得 中 国 
人 和 这 书 . 


图 20-4 页 面 左 侧 文本 介绍 
在 HTML 文件 中 ， 创 建 页 面 左 侧 内 容 介绍 的 代码 如 下 所 示 。 


<div id="content"> 

<div id="text"> 

<h3 class="headlines"><a href="#" title="testing"> 欢 迎 来 到 我 们 的 网 站 
</a></h3> 

<p><img src="images/fotos.jpg" alt="fotos" align="right" /> 

远大 公司 成 立 于 1998 年 ， 注 册 资 本 1700 万 元 ， 是 国家 认定 的 高 新 技术 企业 、 软 件 企业 ， 是 专业 的 
电信 系统 仿 软 件 和 应 用 服务 供应 商 。</p><p> 

公司 坚持 走 自立 创新 、 稳 步 发 展 的 道路 ， 以 创立 品牌 为 自己 的 基本 策略 ， 以 产品 自身 的 品质 、 

先进 的 技术 和 良好 的 服务 取信 于 用 户 。2002 年 至 今 公司 先后 有 多 个 软件 产品 获得 了 河南 省 信息 产业 厅 颁 
发 的 《软件 产品 登记 证 书 》 和 国家 版 权 局 颁发 的 《软件 著作 权 登 记 证 书 》。 同 时 远大 的 进步 和 发 展 ， 也 
得 到 了 政府 部 门 的 大 力 支持 和 关注 ， 获 得 国家 科技 部 和 省 、 市 政府 部 门 技术 创新 基金 无 偿 资助 百 余万元 ， 
并 正式 获得 中 国 质 量 体 系 认 证 中 心 颁发 的 TS09001:2008 质 量 管理 体系 认证 证 书 。 


</p> 

<p>&gnbsp;</p> 
</div><!--end text--> 
</div> 


在 上 面 的 代码 中 ，content 层 是 页 面 主 体 ，text 层 是 页 面 主体 中 的 左 侧 部 分 。text 层 包 含 了 
标题 和 段落 信息 ， 段 落 中 包含 一 张 图 片 。 
在 CSS 文件 中 ， 对 于 上 面 HIML 标记 的 CSS 代码 如 下 所 示 。 


#text { 

background: rgb(255,255,255) url('text-top.gif') no-repeat; 
width:518px; 

color:rgb(0,0,0); 

Eloats lest 

了 

#text hl,#text h2,#text h3,#text h4{ 

Color:rgb{(140,.9,.9)5 
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} 

#text h3.headlines af 

color:rgb(140,9,9); 

} 

在 上 面 的 代码 中 ，#text 层 定 义 了 背景 图 片 、 背 景 颜 色 、 字 体 颜 色 和 页 面 左 浮动 。 下 面 的 
选择 器 定义 了 标题 显示 样式 ， 例 如 字体 颜色 等 。#text h3.headlines a 选择 器 定义 了 标题 3、 类 


headlines 和 超级 链接 显示 样式 。 


20.2.3 ” 右 侧 导航 链接 


在 页 面 主体 右 侧 版 式 中 ， 其 文本 信息 不 是 太 多 , 但 非常 重要 ， 是 首页 用 于 链接 其 他 页 面 的 
导航 链接 ， 例 如 客户 详细 信息 、 最 新 消息 等 。 同 样 ， 右 侧 需 要 设置 为 固定 宽度 并 且 向 左 浮动 的 
版 式 。 在 正 11.0 中 的 浏览 效果 如 图 20-5 所 示 。 


图 20-5 页 面 右 侧 链 接 


从 上 面 的 效果 图 可 以 看 出 , 页 面 中 需要 包含 几 个 无 序列 表 和 标题 , 其 中 列表 选项 为 超 链接 。 
在 HTML 文件 中 ， 用 于 创建 页 面 主体 右 侧 版 式 的 代码 如 下 所 示 。 


<div id="column"> 

<h3><span> 最 新 消息 </span></h3> 

<ul class="category list"><1i><a href="#"> 公 司 组 织 员 工 连云港 旅游 </a></1i> 

<li><a href="#">2011 员 工 乒乓 球 大 赛 开幕 </a></1i> 

<1i><a href="#"> 公 司 总 经 理会 见 实习 大 学 生 </a></1i> 

<1i><a href="#"> 公 司 销 售 部 门 再 传 捷 报 </a></1i></ul> 

<h3><span> 产 品 展示 </span></h3> 

<ul class="recent articles"><1i><a href="#"> 在 线 人 员 素 质 考核 系统 </a></1i> 

<1i><a href="#"> 线 损 计算 机 系统 </a></1i> 

<1i><a href="#"> 质 量 运 用 管理 系统 </a></1i></ul> 

<h3><span> 客 户 </span></h3> 

<ul class="wet recent comments"><1i><a href="#"><cite> 华 中 地 区 
</cite></a><p> 河 南 地 区 </p></1i> 
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<li><a href="#"><cite> 华 东 地 区 </cite></a><p> 上 海地 区 </p></1i></ul> 
</div><!--end column--> 
<div id="content-bottom">gnbsp;</div> 


在 上 面 的 代码 中 创建 了 两 个 层 ， 分 别 为 column 层 和 content-bottom 层 。 其 中 ，column 层 
用 于 显示 页 面 主体 中 右 侧 的 链接 ， 并 包含 了 三 个 标题 和 三 个 超级 链接 ; content-bottom 层 用 于 
消除 上 面 层 的 float 浮动 效果 。 

在 CSS 文件 中 ， 用 于 修饰 上 面 HTML 标记 的 CSS 代码 如 下 所 示 。 


#column{ 

background:rgb(142,14,14) url('images/column.gif') no-repeat; 

float:right; 

width:247px;} 

#column p{font-size:0.7em;} 

#column ul{font-size:0.8em;} 

#column h3{ 

background:transparent url('images/h3-column.gif') no-repeat; 

position:relative; 

left:-18px; 

height:26px; 

width:215px; 

margin-top:10px; 

padding-top: 6px; 

padding-left:6px; 

font-size:0.9em; 

z-index:1; 

font-family:Verdana, "Geneva CE",1lucida,sans-serif; 

} 

#column h3 span{margin-left:10px;} 

#column span.name{ 

text-align:right; 

color:rgb(223,58,0); 

margin-right:5px; 

} 

#column a{color:rgb(255,255,255);} 

#column a:hover{color:rgb(80,210,122);} 

p:comments{ 

text-align:right; 

font-size:0.8em; 

font-weight:bold; 

padding-right:10px; 

} 

#content-bottomt{ 

background: transparent Url ('images/content-bottom.gif') no-repeat scroll 
left bottom; 

clear:both; 

display:block; 
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width:770px; 

height:13px; 

font-size:0Opt; 

» 

在 上 面 的 代码 中 ，#column 选择 器 定义 背景 图 片 、 背 景 颜色 、 页 面 右 浮动 和 宽度 。 
#content-bottom 选择 器 定义 背景 图 片 、 宽 度 、 高 度 、 字 体 大 小 和 以 块 显示 ， 并且 使 用 clear 消除 
前 面 层 使 用 float 的 影响 。 其 他 选择 器 主要 定义 column 层 中 其 他 元 素 的 显示 样式 ， 例 如 无 序列 
表 样 式 、 列 表 选 项 样式 和 超 链 接 样 式 等 。 


20.2.4 ”版 权 信息 


版 权 信息 一 般 放置 到 页 面 底部 ， 用 于 介绍 页 面 的 作者 、 地 址 信息 等 ， 是 页 脚 的 一 部 分 。 页 
脚 部 分 和 其 他 网 页 部 分 一 样 ， 需 要 保持 简单 、 清 晰 的 风格 。 在 正 11.0 中 的 浏览 效果 如 图 20-6 
所 示 。 


[El HE AML 


图 20-6 页 脚 部 分 


从 上 面 的 效果 图 可 以 看 出 ， 此 页 脚 部 分 非常 简单 ， 只 包含 了 一 个 作者 信息 的 超 链接 ， 因 此 
设置 起 来 比较 方便 ， 其 代码 如 下 : 


<div id="footer"> 


<p id="ivorius"><a href="#"> 网 页 设计 者 : 李 四 工 作 室 </a></p> 
</div><!--end footer--> 


在 上 面 的 代码 中 ， 层 footer 包含 了 一 个 段落 信息 ， 其 中 段落 的 id 是 ivorius。 
在 CSS 文件 中 ， 用 于 修饰 上 面 HTML 标记 的 样式 代码 如 下 所 示 。 


#footert{ 

background:transparent url('images/footer.png') no-repeat scroll left 
bottom; 

margin-top:5px; 

padding-top:2px; 

height:33px; 

} 

#footer p{text-align: center;} 

#footer a{color:rgb(255,255,255);} 

#footer a:hover{color:rgb(223,58,0); } 

p#ivoriust{ 

float:right; 

margin-right:13px; 

font-size:0.75em; 
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} 
p#ivorius a{color:rgb(80,210,122); } 


在 上 面 的 代码 中 ，#footer 选择 器 定义 了 页 脚背 景 图 片 、 内 外 边 距 的 顶部 距离 和 高 度 。 其 他 
选择 器 定义 了 页 脚 部 分 文本 信息 的 对 齐 方 式 、 超 链接 样式 等 。 


20.3 ”整体 调整 
在 前 面 的 各 个 小 节 中 ， 完 成 了 首页 中 不 同 部 分 的 制作 ， 其 整个 页 面 基 本 上 已 经 成 形 。 在 制 
作 完 成 后 , 需要 根据 页 面 实际 效果 做 一 些 细节 上 的 调整 ,从 而 使 页 面 整体 效果 更 加 完善 。 例如， 
各 块 之 间 的 padding 和 margin 值 是 否 与 页 面 整体 协调 、 各 个 子 块 之 间 是 否 协调 统一 等 。 页 面 效 
果 调 整 前 ， 在 正 11.0 中 的 浏览 效果 如 图 20-7 所 示 。 


剖 门 村 相 人 放 基 友 天 人 点 tE， 


俏 闻 150901 308 过 量 管 理 


图 20-7 页 面 调 整 前 效果 


从 图 20-7 中 可 以 发 现 页 面 段落 没有 缩 进 、 页 面 右 侧 列表 选项 之 间 的 距离 太 小 等 问题 。 这 
时 可 以 利用 CSS 属性 调整 ， 其 代码 如 下 所 示 。 


p{margin:0.4em 0.5em;font-size:0.85em;text-indent:2em;} 

a{color:rgb(25,126,241) ;text-decoration:underline;} 

a:hover{color:rgb (223, 58,0) ;text-decoration:none;} 

a img{border:medium none;} 

ul,ol{margin:0.5em 2.5em;} 

h2{margin:0.6em Opt 0.4em 0.4em;} 

h3,h4,h5{margin:lem Opt 0.4em 0.4em;} 

*{margin:0pt;padding:0pt;} 

body{background:rgb(61, 62,63) url('images/body.gif') repeat;color:white; 
font-size: lem;font-family:"Trebuchet MS",Tahoma,"Geneva CE",lucida;} 


在 上 面 的 代码 中 ， 全 局 选择 器 * 设 置 了 内 外 边 距 距 离 ，body 标记 选择 器 设置 了 背景 颜色 、 
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图 片 、 字 体 大 小 ， 字 体 颜 色 和 字形 等 。 其 他 选择 器 分 别 设置 了 段落 、 超 链接 、 标 题 和 列表 等 样 
式 信息 。 


20.4 专家 解 惑 


1. 在 Firefox 和 IE 浏览 器 中 ， 如 何 处 理 负 边 界 问题 ? 

在 正中 ， 超 出 父 元 素 的 部 分 会 被 父 元 素 覆 盖 。 在 Firefox 中 ， 超 出 父 元 素 的 部 分 会 覆盖 父 
元 素 ， 但 前 提 是 父 元 素 有 边框 或 内 边 距 ， 不 然 负 边 距 会 显示 在 父 元 素 上 ， 使 得 父 元 素 拥 有 负 边 
距 。 在 进行 网 页 设计 时 ， 针 对 上 面 的 情况 可 以 对 元 素 进行 相对 定位 。 

2 在 定义 子 元 素 的 上 边 距 时 ， 超 出 元 素 高 度 沪 怎 么 处 理 ? 

在 正 浏 览 器 中 ， 子 元 素 上 边 距 显 示 正 常 。 在 Firefox 浏览 器 中 ， 子 元 素 上 边 距 会 显示 
在 父 元 素 上 方 。 其 解决 办 法 是 在 父 元 素 中 增加 “overflow:hidden” 语 句 或 给 父 元 素 增加 边 
框 或 内 边 距 。 


第 21 章 项目 实 训 2 
一 一 设计 星际 争霸 的 网 页 游戏 


HTML5 作为 下 一 代 Web 开发 标准 ， 成 为 主流 的 日 子 已 经 不 远 。 它 对 音频 、 视 频 、 事 件 处 
理 \ 绘 图 等 的 支持 让 我 们 非常 期 待 .本 章 主要 通过 一 个 HTMLS5 的 游戏 让 读者 轻松 掌握 HTML5、 
CSS 和 JavaScript 的 新 特性 ， 并 灵活 应 用 到 Web 开发 中 。 


21.1 游戏 概述 


本 实例 将 制作 一 个 星际 争霸 的 游戏 。 游 戏 需要 实现 的 效果 如 下 : 

玩家 按 Enter 键 开始 游戏 ， 进 入 游戏 主 界面 后 ， 按 键盘 上 的 左右 键 控制 游戏 的 移动 方向 ， 
按 A 键 开 始 射击 。 默 认 情况 下 ， 玩 家 的 生命 值 为 100， 如 果 玩 家 没有 射击 到 敌 机 ， 就 分 为 两 种 
情况 : 敌 机 和 玩家 的 战机 相 撞 ， 减 少 玩家 生命 值 10 分 ; 敌 机 没有 和 玩家 的 战机 相 撞 ， 玩 家 的 
生命 值 不 减少 。 

游戏 开始 页 面 的 效果 如 图 21-1 所 示 。 


图 21-1 游戏 开始 界面 


按 Enter 键 ， 进 入 游戏 运行 页 面 ， 按 左右 键 控制 方向 ， 按 A 键 射击 敌 机 ， 效 果 如 图 21-2 
所 示 。 
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图 21-2 游戏 主 界面 


21.2 ”游戏 需求 分 析 
创建 星际 争霸 游戏 ， 主 要 的 文件 夹 列表 如 图 21-3 所 示 。 


js 
® index.html 360 Chrome HT. 


图 21-3 游戏 的 主要 文件 夹 列表 


其 中 ,css 文件 夹 下 主要 包括 游戏 网 页 的 样式 表 , 文件 名 称 为 main.css。images 文件 夹 下 主 
要 包括 游戏 的 飞机 和 环境 背景 图 等 。js 文件 夹 下 主要 包括 jquery.js 和 scriptjs 两 个 文件 。 其 中 ， 
jquery.js 主要 定义 了 JavaScript 脚本 的 框架 ，scriptjs 文件 主要 是 为 了 实现 游戏 功能 。index.html 
是 游戏 启动 的 主页 面 。 

images 文件 夹 下 的 图 片 效果 如 图 21-4 所 示 。 


“> 09000999 


explosion png intro. jpg 


9 


levelnap. jpe plane pnE rocket. png 


图 21-4 游戏 需要 的 主要 图 片 
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21.3 HTML5、CSS 和 JavaScript 搭配 实现 


下 面 查看 游戏 实现 所 需要 的 HTML5、CSS 和 JavaScript 的 技术 。 


21.3.1 基本 的 HTML5 结构 和 标记 
用 户 首先 需要 创建 ndex html， 实 现 基本 的 结构 和 标记 ， 具 体 的 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en" > 

<head> 

<meta charset="GB2312" /> 

<title> 星 际 争霸 游戏 </title> 

<!-- 添加 样式 表 --> 

<link href="css/main.css" rel="stylesheet" type="text/css" /> 

<!-- 添加 scripts 脚本 代码 --> 

<!--[if 1t IE 9]> 

<script 
src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 

<![endif]--> 

<script src="js/jquery.js"></script> 

<script src="js/script.js"></script> 

</head> 

<body> 

<header> 

<h2> 星 际 争霸 </h2> 

</header> 

<div class="container"> 

<canvas id="scene" width="700" height="700" tabindex="1"></canvas> 

</div> 

</body> 

</html> 


其 中 ,<!--[fltIE 9]> 表 示 如 果 浏 览 器 版 本 小 于 正 9 就 加 载 <script sre="http://html5shiv.googlecode. 
com/svn/trunk/html5.js"></script>JavaScript 脚本 代码 ; <script src="js/jquery.js"></script> 和 
<script sre="js/script.js"></scrip 人 > 代码 表示 加 载 JavaScript 脚本 ; <canvas id="scene" width="700" 
height="700" tabindex="1"></canvas> 表 示 绘 图 的 宽 、 高 分 别 为 700 像素 ，tabindex="1" 表 示 键 盘 
移动 顺序 。 

运行 效果 如 图 21-5 所 示 。 


星际 争霸 


图 21-5 未 设置 样式 的 游戏 主 界面 
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HTML5 重要 的 新 特征 主要 包括 canvas。 这 个 新 技术 为 开发 人 员 提 供 了 一 个 新 途径 ， 可 以 
采用 一 种 完全 自由 的 方式 绘图 、 包 含 图 像 以 及 放置 文本 。 与 早起 的 HTML 版 本 相 比 ， 这 是 一 
个 比较 显著 的 改进 。 在 早起 的 版 本 中 ， 虽 然 也 能 完成 一 些 简单 的 图 形 或 者 使 用 JavaScript 脚本 
实现 ， 但 是 使 用 canvas 可 以 在 画布 上 自由 绘图 。 


21.3.2 ”使 用 CSS 修改 页 面 


CSS 允许 用 户 为 HTMLS5 文档 中 的 各 个 部 分 指定 格式 , 特别 是 对 于 静态 的 HTML，CSS 的 
功能 十 分 强大 。 此 游戏 的 CSS 样式 表 的 名 称 为 main.css 文件 ， 代 码 如 下 。 


本 
margin: 0; 
padding: 0; 
} 
html { 
background-attachment: fixed; 
background: #bda9a2; 
background: -moz-linear-gradient (top, #bda9a2 0%, #90817a 47%, #6f£6059 
100%); 
background: -webkit-gradient (linear, left top, left bottom, 
color-stop(0%,#bda9a2), color-stop(47%,#90817a), color-stop(100%,#6f£6059)); 
background: -webkit-linear-gradient (top, #bda9a2 0%,#90817a 
47%,#6f£6059 100%); 
background: -o-linear-gradient (top, #bda9a2 0%,#90817a 47%,#6f6059 


100%); 

background: -ms-linear-gradient (top, #bda9a2 0%,#90817a 47%,#6f£f6059 
100%); 

background: linear-gradient (to bottom, #bda9a2 0%,#90817a 47%,#6f6059 
100%); 


filter: 
progid:DxImageTransform.Microsoft.gradient( startColorstr='#bda9a2', 
endColorstr="'#6f£6059',GradientType=0 ); 
height: 100%; 
3 
header { 
background-color:rgba(33, 33, 33, 0.9); 
Color:#fff; 
display:block; 
font: 14px/1.3 Arial,sans-serif; 
height:50px; 
position:relative; 
’ 
header h21{ 
font-size: 22px; 
margin: Opx auto; 
padding: 1l0px 0; 
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width: 80%; 
text-align: center; 

} 

header a, a:visited { 
text-decoration:none; 
color:#fcfcfc; 

} 

#scene { 
display: block; 
height: 700px; 
margin: 10px auto; 
position: relative; 
width: 700px; 

} 


经 过 CSS 样式 表 修改 后 ， 效 果 如 图 21-6 所 示 。 


图 21-6 CSS 修饰 过 的 界面 


21.3.3 ”编写 JavaScript 程序 


JavaScript 是 一 种 脚本 编程 语言 ， 提 供 了 不 少 内 置 的 函数 来 访问 HTML 文档 的 各 个 部 分 ， 


包括 CSS 元 素 的 样式 。 


另外 ， 本 游戏 使 用 的 是 jQuery 框架 ，jQuery 是 继 prototype 之 后 又 一 个 优秀 的 JavaScript 
框架 。 它 是 轻 量 级 的 JS 库 ， 兼 容 CSS3， 还 兼容 各 种 浏览 器 。jQuery 使 用 户 能 更 方便 地 处 理 


HTML documents、events 以 及 实现 动画 效果 。 
其 中 ，JavaScript 文件 的 内 容 和 作用 如 下 : 


// 定义 图 像 对 象 

Var backgroundImage; 

Var oRocketImage; 

var oExplosionImage; 

var introImage; 

Var oEnemyImage; 

var iBgShiftYy = 9300; // 水 平 宽度 10000 - canvas 高 度 700 
var bPause = true; // 游戏 暂停 

var plane = null; // 定义 飞机 对 象 

var rockets = []; // 定义 飞机 移动 数组 
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var enemies = []; // 定义 敌 机 数组 

var explosions = []; // 定义 飞机 爆炸 数组 
var planeW = 200; // 定义 飞机 的 宽度 

var planeH = 110; // 定义 飞机 的 高 度 

var iSprPos = 2; // 飞机 的 初始 框架 

var iMoveDir = 0; // 定义 移动 方向 

var iEnemyW = 128; // 敌 机 宽度 

var iEnemyH = 128; // 敌 机 高 度 

var iRocketSspeed = 10; // 初始 飞机 的 移动 速度 
var iEnemySpeed = 5; // 初始 敌 机 的 移动 速度 
var pressedKeys = []; // 定义 按键 数组 

var iscore = 0; // 初始 化 分 数 

var iLife = 100; // 初始 化 生命 值 

var iDamage = 10; // 敌 机 撞击 玩家 的 飞机 后 的 损坏 值 
var enTimer = null; // 随机 出 现 一 个 敌 机 

// 定义 飞机 函数 对 象 


function Plane(x, y, Ww, h, image) { 


this.x = 
this.y = y; 
this.w = Ww; 
this.h = h; 


this.image = image; 
this.bDrag = false; 


} 

// 定义 攻击 函数 对 象 

function Rocket (x, y, w, h, speed, image) { 
this.x = 


this.y = y; 
this.w = w; 
this.h = h; 


this.speed = speed; 
this.image = image; 


} 

// 定义 敌 机 函数 对 象 

function Enemy(x, y, Ww, h, speed, image) { 
Ehdsex = 


this.y = y; 
this.w = w; 
this.h = h; 


this.speed = speed; 
this.image = image; 

} 

// 定义 爆炸 函数 对 象 

function Explosion(x, y, w, h, sprite, image) 
Ehisez = > 


thissy y; 
this.w = w; 
this.h = h; 


{ 


451 * 
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this.sprite = sprite; 
this.image = image; 
} 
// 从 x 和 Y 中 随机 获取 字母 的 函数 
function getRand(x, y) { 
return Math.floor (Math.random()*y)+x; 
1 
// 初始 显示 函数 
function displayIntro() { 
ctx.clearRect (0, 0, ctx.canvas.width, ctx.canvas.height); 
ctx.drawImage (introImage, 0, 0,700, 700); 


} 
// 绘制 主要 的 场景 函数 
function drawscene() { 
if (! bPause) { 
iBgshiftY -= 2; // 飞机 移动 的 范围 
dE (BIShiftr < St 
bPause = trues 
// 绘制 场景 
ctx.font = '40px Verdana'; 
ctx.fillstyle = '#fff"; 
ctx.fillText ('Finish, your score: ' + iScore * 10 + ' points', 
50, 200); 
return; 


E 
// 通过 按键 控制 飞机 
processPressedKeys(); 
// 清除 绘图 
ctx.clearRect (0, 0, ctx.canvas.width, ctx.canvas.height); 
// 绘制 游戏 背景 
ctx.drawImage (backgroundImage, 0, 0 + iBgShiftY, 700, 700, 0, 0, 700, 
700); 
// 绘制 游戏 飞机 
ctx.drawImage (plane.image, iSprPos*plane.w, 0, plane.w, plane.h, 
plane.x - plane.w/2, plane.y - plane.h/2, plane.w, plane.h); 
// 绘制 爆炸 效果 
if (rockets.length > 0) { 
for (var key in rockets) { 
if (rockets[key] != undefined) { 
ctx.drawImage (rockets [key] .image, rockets[key] .x, 
rockets[key] .y); 
rockets[key] .y -= rockets[key] .speed; 
// 如 果 攻 击 在 屏幕 范围 之 外 ， 则 忽略 攻击 
if (rockets[key].y < 0) { 
delete rockets[key]; 
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， 
// 绘制 爆炸 
if (explosions.length > 0) { 
for (var key in explosions) { 
if (explosions[key] != undefined) { 
// 显示 爆炸 效果 
ctx.drawImage (exzplosions [key] .image, 
explosions [key] .sprite*explosions[key] .w，0，explosions [key] .w， 
explosions [key] .h，explosions [key] .x - exzplosions [key] .w/2, explosions[key].y 
— explosions [key] .h/2，explosions [key] .w，explosions [key] .h) ; 
explosions [key] .spPrite++7 
// 如 果 敌 机 被 击毙， 则 消除 爆炸 对 象 
if (explosions[key] .sprite > 10) { 
delete explosions[key]; 


} 
} 
// 绘制 敌 机 
if (enemies.length > 0) { 
for (var ekey in enemies) { 
if (enemies[ekey] != undefined) { 
ctx.drawImage (enemies [ekey] .image, enemies[ekey] .x, 
enemies [ekey] .y); 
enemies [ekey] .y -= enemies [ekey] .speed; 
// 假如 敌 机 在 屏幕 之 外 ， 则 忽略 敌 机 对 象 
if (enemies[ekey].y > canvas.height) { 
delete enemies[ekey]; 


if (enemies.length > 0) { 
for (var ekey in enemies) { 
if (enemies[ekey] != undefined) { 
// 碰撞 的 爆炸 效果 
if (rockets.length > 0) { 
for (var key in rockets) { 
if (rockets[key] != undefined) { 
if (rockets[key].y < enemies[ekey].y + 
enemies[ekey] .h/2 && rockets[key] .x > enemies[ekey] .x && rockets [key] .x + 
rockets[key] .w < enemies[ekey] .x + enemies[ekey] .w) { 
explosions.push (new 
Explosion (enemies[ekey] .x + enemies[ekey] .w / 2, enemies[ekey].y + 
enemies[ekey].h / 2, 120, 120, 0, oExplosionImage)); 
// 消除 敌 机 和 爆炸 ， 然 后 增加 1 分 
delete enemies[ekey]; 
delete rockets[key]; 
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iScoret+t+; 
' 
3 
} 
} 
// 飞机 的 碰撞 
if (enemies[ekey] != undefined) { 


if (plane.y - plane.h/2 < enemies[ekey].y + 
enemies[ekey] .h/2 && plane.x - plane.w/2 < enemies[ekey] .x + enemies[ekey] .w 
&& plane.x + plane.w/2 > enemies[ekey] .x) { 
explosions.push (new Explosion (enemies[ekey] .x + 
enemies[ekey] .w / 2, enemies[ekey].y + enemies[ekey].h / 2, 120, 120, 0, 
oExplosionImage)); 
// 消除 敌 机 和 制作 损坏 
delete enemies[ekey]; 
iLife -= iDamage; 
if (iLife <= 0) { // 游戏 结束 
bPause = true; 
// 计算 总 得 分 
ctx.font = '38px Verdana' 7 
ctx.fillstyle = '#fff"; 
ctx.fillText ('Game over, your score: ' + iscore 
LO DOLnteL 2570 2000 
return; 


; 


} 
// 显示 生命 值 和 得 分 
ctx.font = '14px Verdana'; 
Ctx fillStyle = 条 下 于 在 72 
ctx fillTonrt( "Dito EDILFEG IO 1007 50 660)s 
ctx: fillrort( "Score "+ J9core * 10. 50. 600) 
上 


} 
// 游戏 过 程 中 的 按键 函数 
function processPressedKeys() { 
if (pressedKeys[37] != undefined) { // 左 键 控 制 效 果 
if (isprPos > 0) { 
SPDrPoOs= 7 
iMoveDir = -7; 
} 
if (plane.x - plane.w / 2 > 10) { 
plane.x += iMoveDir; 
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else if (pressedKeys[39] != undefined) { // 右键 控制 效果 
(TOPprPos < A) 届 
iSprPost++; 


iMoveDir = 7; 

} 

if (plane.x + plane.w / 2 < canvas.width - 10) { 
plane.x += iMoveDir; 


} 
} 
// 增加 随机 的 敌 机 函数 
function addEnemy() { 
clearIinterval (enTimer); 
var randx = getRand(0, canvas.height - iEnemyH); 
enemies.push (new Enemy (randXx, 0, iEnemyW, iEnemyH, - iEnemySpeed, 
oEnemyImage)); 
var interval = getRand(1000, 4000); 
enTimer = setInterval (addEnemy，interval); // 函数 循环 执行 


} 

// 主要 的 默认 函数 

$ (function(){ 
canvas = document .getElementById('scene'); 
ctx = canvas.getContext ('2d'); 


// 载 入 背景 图 片 
backgroundImage = new Image(); 
backgroundImage.src = 'images/levelmap.jpg'; 


backgroundImage.onload = function() { 

} 

backgroundImage .onerror = function() { 
console.1og('Error loading the background image.'); 

上 

introImage = new Image () 7 

introImage.src = 'images/intro.jpg'; 

// 初始 化 敌 机 攻击 效果 

oRocketImage = new Image () 7 

oRocketImage.src = 'images/rocket.png'; 

oRocketImage.onload = function() { } 

// 初始 化 爆炸 图 片 


oExplosionImage = new Image(); 


oOoExplosionImage.src = 'images/explosion.png'; 
oExplosionImage.onload = function() { } 

// 初始 化 敌 机 

oEnemyImage = new Image(); 

oEnemyImage.src = 'images/enemy.png'; 
oEnemyImage.onload = function() { } 

// 初始 化 玩家 战机 


Var oPlaneImage = new Image(); 
oPlaneImage.src = 'images/plane.png'; 
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oPlaneImage.onload = function() { 
plane = new Plane(canvas.width / 2, canvas.height - 100, planeWw, 
planeH, oPlaneImage); 
} 
$ (window) .keydown (function (evt){ // 手动 控制 飞机 的 事件 
Var pk = pressedKeys[evt.keyCodel]; 
if CU pK) 
pressedKeys[evt.keyCode] = 1; // 将 按键 添加 进 数 组 


if (bPause && evt.keyCode == 13) { // 按 下 Enter 键 效果 
bPause = false; 


// 开始 游戏 
setInterval (drawScene，30); // 循环 绘制 游戏 场景 
// 添加 一 个 敌 机 
addEnemy (); 
} 
DD); 
$ (window) .keyup (function (evt) { 
// 松 开 按 键 后 的 事件 
Var pk = pressedKeys[evt.keyCode]; 
Tf (PR) 
delete pressedKeys [evt .keyCode]; 
// 从 数组 中 移 除 按键 
} 
if (evt.keyCode == 65) { // 按 A 键 开始 攻击 


rockets .Push (new Rocket (plane.x - 16, plane.y - plane.h, 32, 32, 
iRocketSpeed, oRocketImage)); 


3 
if (evt.keyCode == 37 || evt.keyCode == 39) { 
// revert plane sprite to default position 
LE (iSprPos > 2) { 
for (var i = iSprPos; i >= 2; i--) { 
isprPos = i; 
iMoveDir = 0; 
} 
} else  { 
For (var 三 SprPoss 4 <= 22 Lt#) 寺 
isprPos = i; 
iMoveDir = 0; 


} 
ps 
// 当 游 戏 开场 条 件 准备 好 后 开始 游戏 
introImage.onload = function () { 
displayIntro(); 
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在 互联 网 行业 发 展 的 过 程 中 ， 移 动 互 联网 已 经 成 为 热门 ， 本 章 将 使 用 jQuery Mobile 框架 
来 开发 一 个 移动 端 宠物 店 的 小 项 目 。 通 过 本 章 的 学 习 ， 读 者 可 以 了 解 jQuery Mobile 插件 的 使 
用 方法 、 掌 握 Camera 插件 实现 焦点 轮 播 图 的 方法 和 使 用 Swipebox 插件 实现 灯箱 效果 的 方法 。 


22.1 项 目 概述 


宠物 店 项 目 中 主要 的 文件 和 文件 夹 如 图 22-1 所 示 。 该 项 目 主要 包括 4 个 页 面 ， 分 别 是 首 
页 、 注 册页 面 、 宠 物 图 片 展示 页 面 和 咨询 页 面 。 


名 称 类 型 

看 camera 文件 夫 

看 images 文件 夫 

看 Swipebox 文件 去 

坚 jquery.mobile-1.4.5.css 层 又 样式 表 文 档 
jquery.mobile-1.4.5js JavaScript 


jquery-1.8.3.minjs 
大 宠物 图 片 展示 .html 
地 首页 .html 
寺 注册 .html 
和 咨询 .html 


JavaScript 文件 
360 Chrome HT 
360 Chrome HT.. 
360 Chrome HT.. 


360 Chrome HT.. 


图 22-1 宠物 店 项 目 中 的 文件 目录 


22.2 项 目 开发 前 必 备 知识 


本 项 目 主要 使 用 Camera 插件 和 Swipebox 插件 ， 下 面 开始 讲述 这 两 个 插件 的 基础 知识 。 
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22.2.1 Camera 插件 

Camera 插件 是 一 个 基于 jQuery 插件 的 开源 项 目 ， 主 要 用 来 实现 轮 播 图 特效 。 在 轮 播 中 ， 
用 户 可 以 查看 每 一 张 图 片 的 主题 信息 ， 手 动 终止 播放 过 程 。 

Camera 插件 的 官方 下 载 地 址 如 下 : 


https://github.com/pixedelic/Camera 
下 面 通过 案例 来 讲述 如 何 使 用 Camera 插件 实现 轮 播 效果 。 


【 例 22.1】 实例 文件 : ch22\22.1.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title>camera 插件 应 用 程序 </title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="jquery.mobile-1.4.5.css"> 
<script src="jquery-1.8.3.min.js"></script> 
<script src="jquery.mobile-1.4.5.js"></script> 
<link rel="stylesheet" href="camera/css/camera.css"> 
<script src="camera/js/jquery.easing.1.3.js"></script> 
<script src="camera/js/camera.js"></script> 
</head> 
<body> 
<div data-role="page"> 
<div data-role="header"> 
<hl>camera 插件 </h1> 
</div> 
<div data-role="main" class="camera wrap camera azure skin" 
id="cameral"> 
<div data-src="image/01.jpg"> 
<div class="camera caption fadeFromBottom"> 
第 一 张 
</div> 
</div> 
<div data-src="image/02.jpg"> 
<div class="camera caption fadeFromBottom"> 
第 二 张 
</div> 
</div> 
<div data-src="image/03.jpg"> 
<div class="camera caption fadeFromBottom"> 
第 三 张 
</div> 
</div> 
<div data-src="image/04.jpg"> 
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<div class="camera caption fadeFromBottom"> 
第 四 张 
</div> 
</div> 
</div> 
<div data-role="footer" data-position="fixed"> 
<h4> 尾 部 </h4> 
</div> 
</div> 
</body> 
<script> 
$ (function() { 
$('#cameral') .camera({ 
time: 1000, 
thumbnails:false 
}) 
je 
</script> 
</html> 


在 Opera Mobile 模拟 器 中 的 预览 效果 如 图 22-2 所 示 。 


@ Opera Mobile - LG Optimus 3D [ 


LG Optimus 3D 561x649 PPE 216 By [100% » 


图 22-2 Camera 实现 轮 播 图 


在 <head> 与 </head> 标 签 中 添加 <meta> 标 签 ， 设 置 和 加 载 jQuery Mobile 函数 库 代 码 ， 与 前 
面 的 案例 相同 。 然 后 引入 Camera 插件 相应 的 CSS 文件 和 JavaScript 脚本 文件 ， 代 码 如 下 : 
<link rel="stylesheet" href="camera/css/camera.css"> 


<script src="camera/js/jquery.easing.1.3.js"></script> 
<script src="camera/js/camera.js"></script> 
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在 <body> 与 </body> 标 签 中 编写 jQuery Mobile 页 面 代码 。 在 内 容 区 域 中 添加 一 个 <div> 标 
签 作为 放置 轮 播 图 片 的 容器 ， 并 在 该 <div> 标 签 中 设置 id 名 称 为 cameral 、 类 样式 名 称 为 
camera_wrap。 在 该 容器 中 ， 同 时 使 用 <div> 标 签 添加 被 轮 播 的 图 片 ， 每 一 个 轮 播 图 片 的 代码 结 
构 都 是 相同 的 。 

在 页 面 中 ， 所 有 的 图 片 元 素 都 添加 完成 后 ， 还 需要 在 页 面 初 始 化 事件 中 调用 Camera 插件 
的 camera0 方 法 才能 实现 执行 该 页 面 时 图 片 容器 中 的 图 片 以 幻灯 片 形 式 轮 播 的 效果 ,代码 如 下 : 


<script> 
$ (function() { 
$('#cameral') .camera({ 
time: 1000, 
thumbnails:false 
}) 
DD); 
</script> 


22.2.2” ”Swipebox 插件 


Swipebox 插件 支持 手机 的 触摸 手势 、 桌 面 电脑 的 键盘 导航 、 视 频 的 播放 和 视网膜 显示 等 。 
对 于 不 支持 的 CSS3 过 渡 特 性 ， 可 以 使 用 jQuery 降级 的 方式 来 处 理 。 

当 用 户 单 击 缩 略图 片 时 ， 图 片 将 会 以 大 图 尺寸 的 方式 展示 。 另 外 ， 用 户 还 可 对 同 组 的 图 片 
进行 左右 切换 来 查看 ， 非 常 适合 用 于 做 照片 画廊 以 及 查看 大 尺寸 图 片 。 

Swipebox 插件 的 下 载 地 址 如 下 : 


http://brutaldesign.github.io/swipebox/ 
下 面 通过 案例 来 讲述 如 何 使 用 Swipebox 插件 来 实现 灯箱 效果 。 


【 例 22.2】〔 实 例文 件 ，ch2222.2.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title>Swipebox 插 件 应 用 程序 </title> 
<meta name="viewport" content="width=device-width,initial-scale=1"> 
<link rel="stylesheet" href="jquery.mobile-1.4.5.css"> 
<script src="jquery.js"></script> 
<script src="jquery.mobile-1.4.5.js"></script> 
<link rel="stylesheet" href="Swipebox/css/swipebox.css"> 
<script src="Swipebox/js/jquery.swipebox.js"></script> 
</head> 
<body> 
<div data-role="page" id="pagel"> 

<div data-role="header" data-theme="b"> 
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<h1>Swipebox 插 件 </h1> 
</div> 
<div data-role="main"> 
<a href=" image/01.jpg" class="boxl"> 
<img src="image/01.jpg" alt="" width="150px"> 
</a> 
<a href="image/02.jpg" class="box2"> 
<img src="image/02.jpg" alt="" width="150px"> 
</a> 
<a href=" image/03.jpg" class="box3"> 
<img src="image/03.jpg" alt="" width="150px"> 
</a> 
<a href="image/04.jpg" class="box4"> 
<img src=" image/04.jpg" alt="" width="150px"> 
</a> 
</div> 
</div> 
</body> 
<script> 
(function($) { 
$('.boxl') .swipebox(); 
$('.box2') .swipebox(); 
$('.box3') .swipebox(); 
$('.box4') .swipebox(); 
}) (jQuery); 
</script> 
</html> 


在 Opera Mobile 模拟 器 中 的 预览 效果 如 图 22-3 所 示 ， 单 击 最 后 一 张 图 片 ， 将 显示 对 应 的 
大 图 ， 如 图 22-4 所 示 。 
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图 22-3 灯箱 效果 图 22-4 显示 大 图 效果 


在 <head> 与 </head> 标 签 中 添加 <meta> 标 签 ， 设 置 和 加 载 jQuery Mobile 函数 库 代 码 ， 与 前 
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面 的 案例 相同 。 然 后 需要 引入 Swipebox 插件 相应 的 CSS 文件 和 JavaScript 文件 脚本 文件 ， 代 
码 如 下 : 


<link rel="stylesheet" href="jquery.mobile-1.4.5.css"> 
<link rel="stylesheet" href="Swipebox/css/swipebox.css"> 
<script src="Swipebox/js/jquery.swipebox.js"></script> 


在 <body> 与 </body> 标 签 中 编写 jQuery Mobile 页 面 代码 。 在 页 面 的 内 容 区 域 中 插入 各 图 片 
的 缩 略 图 ， 为 各 缩 略 图 添加 <a> 标 签 ， 并 设置 它 的 href 属性 值 为 缩 略图 对 应 的 原始 大 图 片 。 在 
每 个 <a> 标 签 中 设置 一 个 class 属性 ， 用 于 与 Swipebox 插件 相 绑 定 。 

在 <script> 与 </script> 标 签 中 的 脚本 代码 用 于 页 面 中 相对 应 的 类 属性 元 素 调用 swipebox 方 
法 ， 具 体 如 下 : 


<script> 

(function($) { 
$('.boxl') .swipebox(); 
$('.box2') .swipebox(); 
$('.box3') .swipebox(); 
$('.box4') .swipebox(); 

}) (jQuery); 

</script> 


22.3 项 目 实现 


本 节 是 使 用 jQuery Mobile 框架 开发 的 ， 要 先 引入 jQuery Mobile 函数 库 ， 有 具体 步骤 在 前 面 
第 19 章 中 详细 介绍 了 ， 这 里 就 不 资 述 了 。 下 面 来 分 别 说 明 每 个 页 面 的 实现 过 程 。 


22.3.1 首页 
首页 的 代码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="jquery.mobile-1.4.5.css"> 
<script src="jquery-1.8.3.min.js"></script> 
<script src="jquery.mobile-1.4.5.js"></script> 
<link rel="stylesheet" href="camera/css/camera.css"> 
<script src="camera/js/jquery.easing.1.3.js"></script> 
<script src="camera/js/camera.js"></script> 
<script> 

$ (function() { 

$('#camera wrap 1') .cameral({ 
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time: 1000, 
thumbnails:false 
}) 
]) 
</script> 
</head> 
<body> 
<div data-role="page"> 
<div data-role="header"> 
<a href=" 注 册 .html" data-ajax="false"> 注 册 </a> 
<a href="#"> 登 录 </a> 
<h1> 欢 迎 来 到 我 的 宠物 店 </h1> 
<div data-role="navbar"> 
<ul> 
<1i><a href=" 首 页 .html" data-ajax="false"> 首 页 </a></1i> 
<1i><a href=" 狗 狗 图 片 展示 .html"” data-ajax="false"> 狗 狗 
</a></1i> 
<1i><a href=" 咨 询 .html" data-ajax="false"> 咨 询 </a></1i> 
</ul> 
</div> 
</div> 
<div data-role="main" class="camera wrap camera azure skin" 
id="camera wrap 1"> 
<div data-thumb="camera/image/slides/thumbs/01.png" 
data-src="camera/image/slides/01.png"> 
<div class="camera caption fadeFromBottom"> 
</div> 
</div> 
<div data-thumb="camera/image/slides/thumbs/02.png" 
data-src="camera/image/slides/02.png"> 
<div class="camera caption fadeFromBottom"> 
</div> 
</div> 
<div data-thumb="camera/image/slides/thumbs/03.png" 
data-src="camera/image/slides/03.png"> 
<div class="camera caption fadeFromBottom"> 
</div> 
</div> 
<div data-thumb="camera/image/slides/thumbs/04.png" 
data-src="camera/image/slides/04.png"> 
<div class="camera caption fadeFromBottom"> 
</div> 
</div> 
<div data-thumb="camera/image/slides/thumbs/05.png" 
data-src="camera/image/slides/05.png"> 
<div class="camera caption fadeFromBottom"> 
</div> 
</div> 
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</div> 
<p> 狗 狗 列 表 </p> 
<ul data-role="listview"> 
<1i> 
<a href="#"> 
<img src="camera/image/slides/01.png" class="ui-li-icon"> 
泰 迪 剩余 数量 
<span class="ui-li-count">3</span> 
</a> 
</1i> 
<1i> 
<a href="#"> 
<img src="camera/image/slides/02.png" class="ui-li-icon"> 
哈士奇 剩余 数量 
<span class="ui-li-count">5</span> 
</a> 
</1i> 
a 
<a href="#"> 
<img src="camera/image/slides/03.png" class="ui-li-icon"> 


阿拉 斯 加 剩余 数量 
<span class="ui-li-count">4</span> 
</a> 
</1i> 
> 


<a href="#"> 
<img src="camera/image/slides/04.png" class="ui-li-icon"> 


金毛 剩余 数量 
<span class="ui-li-count">1</span> 
</a> 
</1i> 
<1i> 


<a href="#"> 
<img src="camera/image/slides/05.png" class="ui-li-icon"> 


柴 犬 剩余 数量 
<span class="ui-li-count">5</span> 
</a> 
</1i> 
</ul> 
</div> 
</body> 
</html> 


在 Opera Mobile 模拟 器 上 运行 的 界面 效果 如 图 22-5 所 示 。 
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图 22-5 首页 页 面 效 果 


在 本 页 面 中 ， 使 用 Camera 插件 实现 轮 播 图 效果 ， 还 用 到 了 jQuery Mobile 的 导航 条 、 计 数 
器 和 图 表 等 。 


22.3.2 ”宠物 图 片 展示 页 面 
该 页 面 的 作用 是 展示 宠物 狗 图 片 ， 页 面 代码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width,initial-scale=1"> 
<link rel="stylesheet" href="jquery.mobile-1.4.5.css"> 
<script src="jquery-1.8.3.min.js"></script> 
<script src="jquery.mobile-1.4.5.js"></script> 
<link rel="stylesheet" href="mmenu/css/style.css"> 
<link rel="stylesheet" href="Swipebox/css/swipebox.css"> 
<script src="Swipebox/js/jquery.swipebox.js"></script> 
<script> 
$ (function($) { 

$('.boxl') .swipebox(); 

$('.box2') .swipebox(); 

$('.box3') .swipebox(); 

$('.box4') .swipebox(); 
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$('.box5') .swipebox(); 
$('.box6') .swipebox(); 
$('.box7') .swipebox(); 
]) 
</script> 
</head> 
<body> 
<div data-role="page" id="pagel"> 
<div data-role="header"> 
<h1> 狗 狗 图 片 展示 </h1> 
<div data-role="navbar"> 
<ul> 
<li><a hre 
<1i><a href= 


"首页 .html" data-ajax="false"> 首 页 </a></1i> 
./ 狗 狗 图 片 展示 .html" data-ajax="false"> 狗 狗 


</a></1i> 
<1i><a href=" 咨 询 .html" data-ajazx="false"> 咨 询 </a></1i> 
</ul> 
</div> 
</div> 
<div data-role="main"> 
<a href="Swipebox/img/01.png" class="box1"> 
<img src="Swipebox/img/01.png" alt="" width="150" height="150"> 
</a> 
<a href="Swipebox/img/02.png" class="box2"> 
<img src="Swipebox/img/02.png" alt="" width="150" height="150"> 
</a> 
<a href="Swipebox/img/03.png" class="box3"> 
<img src="Swipebox/img/03.png" alt="" width="150" 
height="150"> 
</a> 
<a href="Swipebox/img/04.png" class="box4"> 
<img src="Swipebox/img/04.png" alt="" width="150" 
height="150"> 
</a> 
<a href="Swipebox/img/05.png" class="box5"> 
<img src="Swipebox/img/05.png" alt="" width="150" 
height="150"> 
</a> 
<a href="Swipebox/img/06.png" class="box6"> 
<img src="Swipebox/img/06.png" alt="" width="150" 
height="150"> 
</a> 
<a href="Swipebox/img/07.png" class="box7"> 
<img src="Swipebox/img/07.png" alt="" width="150" 
height="150"> 
</a> 
</div> 
</div> 


项 目 实 训 3 一 一 设计 手机 移动 类 网 站 ”第 22 章 


</body> 
</html> 


在 Opera Mobile 模拟 器 上 运行 的 界面 效果 如 图 22-6 所 示 。 
(GormMobie -tom — DO Xx | 
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图 22-6 ”宠物 图 片 展示 页 面 效果 


该 页 面 用 到 了 Swipebox 插件 ， 主 要 是 为 了 实现 灯箱 效果 。 


22.3.3 咨询 页 面 
该 页 面 主要 展示 咨询 信息 ， 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="jquery.mobile-1.4.5.css"> 
<script src="jquery-1.8.3.min.js"></script> 
<script src="jquery.mobile-1.4.5.js"></script> 
<link rel="stylesheet" href="camera/css/camera.css"> 
<script src="camera/js/jquery.easing.1.3.js"></script> 
<script src="camera/js/camera.js"></script> 
<script> 
$(function() { 
$('#camera wrap 1').cameral(l{ 
time: 1000, 
thumbnails:false 
1D); 
/SECRET 
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</head> 
<body> 
<div data-role="page"> 
<div data-role="header"> 
<h1> 欢 迎 来 到 我 的 宠物 店 </h1> 
<div data-role="navbar"> 
<ul> 
<1i><a href=" 首 页 .html" data-ajax="false"> 首 页 </a></1i> 
<1i><a href=" 狗 狗 图 片 展示 .html"” data-ajax="false"> 宠 物 
</a></1i> 
<1i><a href=" 咨 询 .html"> 咨 询 </a></1i> 
</ul> 
</div> 
</div> 
<div data-role="main" class="camera wrap camera azure skin" 
id="camera wrap 1"> 
<div data-thumb="camera/image/slides/thumbs/01.png" 
data-src="camera/image/slides/01.png"> 
<div class="camera caption fadeFromBottom"> 
</div> 
</div> 
<div data-thumb="camera/image/slides/thumbs/02.png" 
data-src="camera/image/slides/02.png"> 
<div class="camera caption fadeFromBottom"> 
</div> 
</div> 
<div data-thumb="camera/image/slides/thumbs/03.png" 
data-src="camera/image/slides/03.png"> 
<div class="camera caption fadeFromBottom"> 
</div> 
</div> 
<div data-thumb="camera/image/slides/thumbs/04.png" 
data-src="camera/image/slides/04.png"> 
<div class="camera caption fadeFromBottom"> 
</div> 
</div> 
<div data-thumb="camera/image/slides/thumbs/05.png" 
data-src="camera/image/slides/05.png"> 
<div class="camera caption fadeFromBottom"> 
</div> 
</div> 
</div> 
<hr> 
<p> 联 系 人 : 张 先生 </p> 
<p> 电 话 : 18112345678</p> 
<p>E-mail: 123456789@qq.com/p> 
</div> 
</body> 
</html> 


在 Opera Mobile 模拟 器 上 运行 的 界面 效果 如 图 22-7 所 示 。 
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图 22-7 咨询 页 面 效 果 


22.3.4 注册 页 面 
该 页 面 是 用 来 注册 用 户 的 ， 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width,initial-scale=1"> 
<link rel="stylesheet" href="jquery.mobile-1.4.5.css"> 
<script src="jquery-1.8.3.min.js"></script> 
<script src="jquery.mobile-1.4.5.js"></script> 
<link rel="stylesheet" href="Swipebox/css/swipebox.css"> 
<script src="Swipebox/js/jquery.swipebox.js"></script> 
<script> 
$ (function($) { 

$('.boxl') .swipebox(); 

$('.box2') .swipebox(); 

$('.box3') .swipebox(); 

$('.box4') .swipebox(); 

$('.box5') .swipebox(); 

$('.box6') .swipebox(); 

$('.box7') .swipebox(); 

17); 

</script> 
</head> 
<body> 
<div data-role="page" id="pagel"> 
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<div data-role="header"> 
<h1> 注 册 </h1> 
<div data-role="navbar"> 
<ul> 
<1i><a href=" 首 页 .html" data-ajax="false"> 首 页 </a></1i> 
<1i><a href="./ 狗 狗 图片 展 示 .html" data-ajax="false"> 狗 狗 
</a></1i> 
<1i><a href=" 咨 询 .html" data-ajax="false"> 咨 询 </a></1i> 
</ul> 
</div> 
</div><br/> 
<div data-role="main"> 
姓名 : <input type="text" id="text" name="text"> 
年 龄 : <input type="number" id="number" name="number"> 
电话 : <input type="tel" id="tel" name="tel"> 
邮箱 : <input type="email" id="email" name="email"> 
<p> 确 定 要 提交 你 的 信息 吗 ? </p> 
<div data-role="controlgroup"> 
<a href="#" data-role="button" class="ui-btn-active"> 确 定 </a> 
<input type="button" value=" 取 消 "> 
</div> 
</div> 
</div> 
</body> 
</html> 


在 Opera Mobile 模拟 器 上 运行 的 界面 效果 如 图 22-8 所 示 。 
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图 22-8 注册 页 面 


